Question

我会创建一个获取模型属性并更改此值的指令，但是当我在指令中分配值时，它会覆盖由异步调用检索的整个对象：我有模型对象

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

它只改变了正确的价值，但我只是第一次这样做

Answer 1

我在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="angularjs@1.5.8" 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>

修改

如果您只想在第一次对指令代码进行一些更改时更改值：

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

在指令中更改NgModel属性会覆盖所有范围angularJs

1 个答案: