在指令中更改NgModel屬性覆蓋所有範圍angularJs

我將創建一個指令，獲取我的模型的屬性並更改此值，但是當我在指令中分配值時，它會覆蓋由異步調用檢索的整個對象：我有我的模型對象在指令中更改NgModel屬性覆蓋所有範圍angularJs

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" 
}

爲什麼它覆蓋我的整個對象以及如何我避免這個？

編輯

如果我改變我的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

我試過你的代碼，但指令修改只有手機的價值。

我也嘗試創建修改對象的名稱，另一個指令和工作正常

檢查代碼在這裏：

// 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>

編輯

如果您只想在第一次更改值y OU可以在你的指示的代碼做一些變化：

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..The問題，也許該對象值是異步，因爲輸入內部NG-重複？ – LorenzoBerti

我編輯我的問題 – LorenzoBerti

我編輯我的答案後編輯 – mpdev7

在指令中更改NgModel屬性覆蓋所有範圍angularJs

回答

相關問題