ディレクティブのNgModelプロパティを変更すると、すべてのスコープのangleJsがオーバーライドされます

私のモデルのプロパティを取得してこの値を変更するディレクティブを作成しますが、ディレクティブで値を代入するとオブジェクト全体が上書きされますasync call：私は私のモデルオブジェクトディレクティブのNgModelプロパティを変更すると、すべてのスコープのangleJsがオーバーライドされます

object: { 
    phone:"123456", 
    name: "Jhon", 
    surname: "Smith" 
}

を持っていると私は電話番号を変更するだろう、と私は 私-HTMLを持って

<input type="text" id="phone" class="form-control" data-ng-model="object.phone" custom-number>

と私の指示：それは唯一のプロパティ電話で上書き

.directive('customNumber', [ '$timeout', function ($timeout) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     scope: { 
      bindedModel: "=ngModel" 
     }, 
     link: function(scope, element, attrs) { 
      scope.bindedModel= "0000"; 

     } 
}

そして、私のモデルオブジェクトは、今の私のモデルは次のとおりです。

object: { 
phone: "0000" 
}

それができる私の全体のオブジェクトを上書きし、どのように、なぜ私はこれを避ける？

EDIT

私は私のHTML

<custom-number model="object.phone" />

そして、私の指示で変更する場合：

var tpl = ' <input type="text" id="id" class="form-control" ng-model="model">'; 
    var init = 0; 
    return { 
     restrict: 'EA', 
     scope: { 
      model: '=', 
      id:'=' 
     }, 
     template: tpl, 
     link: function(scope, element, attrs) { 
      scope.$watch('model', function(newValue, oldValue) { 
       if (oldValue != newValue && init == 0){ 
        scope.model = "0000" 
       } 
      }); 
     } 
};

をそれが唯一の右の値を変更するが、私は最初にそれを行うだろう時間

出典

2017-02-15 LorenzoBerti

私はplunkerであなたのコードを試しましたが、ディレクティブはphoneの値だけを変更します。

私もここにコードをチェックし、オブジェクトの名前を変更し、正しく

を作品別のディレクティブを作成しようとしました：

// Code goes here 
 

 
angular.module("app", []) 
 
.directive('customNumber', [ '$timeout', function ($timeout) { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     scope: { 
 
      bindedModel: "=ngModel" 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
      scope.bindedModel = "1000"; 
 

 
     } 
 
}}]) 
 
.directive('customString', [ '$timeout', function ($timeout) { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     scope: { 
 
      bindedModel: "=ngModel" 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
      scope.bindedModel = "Theo"; 
 

 
     } 
 
}}]) 
 
.controller("myController", ["$scope", 
 
function($scope){ 
 
    $scope.object = { 
 
    phone:"123456", 
 
    name: "Jhon", 
 
    surname: "Smith" 
 
}; 
 

 
}])

<!DOCTYPE html> 
 
<html ng-app="app" > 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="myController"> 
 
    <h1>Hello Plunker!</h1> 
 
    
 
    <input type="text" id="phone" class="form-control" data-ng-model="object.phone" custom-number> 
 
    <div ng-bind="object.name" ng-model="object.name" custom-string></div> 
 
    <div ng-bind="object.surname"></div> 
 

 
    </body> 
 

 
</html>

EDIT

を

値を初めて変更する場合は、yあなたの指示コードに少し変更を加えることができます：

return { 
    restrict: 'E', 
    scope: { 
     model: '=', 
     id:'=' 
    }, 
    template: '<input type="text" id="id" class="form-control" ng-model="model">', 
    link: function(scope, element, attrs) { 
     var check = 0; 
     scope.$watch('model', function(newValue, oldValue) { 
      if (oldValue != newValue && check == 0){ 
       scope.model = "0000" 
       check++; 
      } 
     }); 
    }}

出典

2017-02-15 10:29:38 mpdev7

こんにちはthankyou..この問題は多分入力がng-repeatの内部にあるので非同期ですか？ – LorenzoBerti

私の質問を編集する – LorenzoBerti

あなたの編集後に私の回答を編集しました – mpdev7

ディレクティブのNgModelプロパティを変更すると、すべてのスコープのangleJsがオーバーライドされます

答えて

関連する問題