如何保持父范围属性和隔离范围属性同步?

时间:2016-10-07 10:14:28

标签: javascript angularjs

我有以下模板:

<dynamic-field name="Name" type="input" ng-model="temp.product.name"></dynamic-field>
<dynamic-field name="Price" type="input" ng-model="temp.product.price"></dynamic-field>
<dynamic-field name="Qty" type="input" ng-model="temp.product.qty"></dynamic-field>

自定义指令代码:

app.directive('dynamicField', function() {
    return {
        restrict: 'E',
        templateUrl: getTemplate('templates/single-field.html'),
        scope: {
            ngModel: '='
        },
        link: function($scope, $element, $attrs) {
           // console.log($scope);
       }
   };
});

在指令模板中,显示输入字段:

<div class="field">
    <input type="text" ng-model="ngModel" /> <!-- if $temp.product.post_text in parent scope is set to "Test", it's displayed -->
</div>

问题是,当我修改输入内部的某些内容(隔离范围)时,更改不会应用于父范围。我认为问题是我在这里使用原语:

<input type="text" ng-model="ngModel" />

...但我不知道如何解决这个问题。有什么建议吗?

2 个答案:

答案 0 :(得分:1)

就像你说的那样,因为你的模型是原始值,所以每当你改变隔离范围内的值时,都会创建其范围变量的副本。

一种简单快捷的解决方法是创建一个函数来直接更新父作用域值$scope.$parent.ngModel,然后将ng-change添加到input元素,并在输入值发生更改时调用该函数。

答案 1 :(得分:1)

你一定做错了。如果它是双向约束的,那就是双向约束。

&#13;
&#13;
function MainController() {
  this.name = "test";
  this.logCtrlName = function() {
    alert(this.name);
  }
}

function dynamicField() {
  return {
    restrict: 'E',
    template: `
      <div class="field">
        <input type="text" ng-model="ngModel" />
      </div>
    `,
    scope: {
      ngModel: '='
    }
  };
}

angular.module('app', []);
angular.module('app')
  .controller('MainController', MainController)
  .directive('dynamicField', dynamicField);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController as ctrl">
    <dynamic-field name="Name" type="input" ng-model="ctrl.name"></dynamic-field>
    <a href ng-click="ctrl.logCtrlName();">Name inside parent controller</a>: {{ ctrl.name | json }}
  </div>
</div>
&#13;
&#13;
&#13;