2017-02-15 3 views
0

Я бы создал одну директиву, которая получает свойство моей модели и меняет это значение, но когда в моей директиве я назначаю значение, он перезаписывает весь объект , полученный async Call: у меня есть модель объектаИзменение свойств NgModel в директиве override all scope 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" 
} 

Почему перезаписать весь мой объект и как можно Я избегаю этого?

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

Это изменит только правильное значение, но я бы сделал это только первые время

ответ

0

Я пробовал ваш код в plunker, но директива изменяет только значение телефона.

Я также попытался создать еще одну директиву, изменить имя объекта и работает правильно

проверить код здесь:

// 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 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++; 
      } 
     }); 
    }} 
+0

Здравствуйте, спасибо. Проблема может быть в том, что значение объекта асинхронно, потому что вход внутри ng-repeat? – LorenzoBerti

+0

Я редактирую свой вопрос – LorenzoBerti

+0

Я отредактировал свой ответ после вашего редактирования – mpdev7

Смежные вопросы