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

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

你肯定做错了什么。如果是双向绑定(bind)，那就是双向绑定(bind)。

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

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