如何讓父範圍屬性和隔離範圍屬性保持同步？

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

你一定在做錯事。如果它是雙向的，它是雙向的。

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>

Answer 2

就像你說的那樣，因爲你的模型是原始值，所以無論你何時改變隔離範圍內的值，都會創建它的範圍變量副本。

一個簡單而快速的修復方法是創建一個函數，直接更新父範圍值$scope.$parent.ngModel，然後將ng-change添加到輸入元素，並在輸入值更改時調用該函數。