如何保持父作用域属性和隔离作用域属性同步

How to keep parent scope property and isolated scope property in sync?

本文关键字：属性 作用域 隔离 同步 何保持      更新时间：2023-09-26

我有以下模板:

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

问题是，当我修改输入(隔离作用域)中的某些内容时，更改不会应用于父作用域。我认为问题是我在这里使用了primitive:

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

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

你一定做错了什么。如果是双向边界，那就是双向边界。

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>

就像你说的，因为你的模型是原始值，所以每当你改变孤立范围内的值将创建它的范围变量的副本。

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

相关文章：