Question

我有以下模板：

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

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

Answer 1

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

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

Answer 2

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

＆＃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;

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

2 个答案: