JSBin示例：
http://jsbin.com/yuyetakonowu/1/edit?html,js,output
摘要：
我有两个指令（myParentDirective和myChildDirective）。 myParentDirective包含myChildDirective内容。我正在尝试对myChildDirective中的模型对象进行双向绑定。当我通过简单地更改或向现有对象实例添加属性来“更新”对象时，它就可以成功工作。但是，当我“分配”一个新对象（使用控制器的超时功能中的equals运算符）时，myChildDirective将不会更新。
HTML：
<html ng-app='ValidationApp'>
<head>
<title>Assigning a model object after isolated scope is set doesn't work</title>
</head>
<body ng-controller='MyController'>
<h2>MyController.assignedObject: {{assignedObject}}</h2>
<h2>MyController.updatedObject: {{updatedObject}}</h2>
<my-parent-directive assigned-object='assignedObject' updated-object='updatedObject'>
<my-child-directive></my-child-directive>
</my-parent-directive>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js'></script>
<script src='app.js'></script>
</body>
</html>
JavaScript：
var app = angular.module('ValidationApp', [])
app.controller('MyController', [
'$scope',
'$http',
function($scope, $http) {
// Model objects loaded on page-load
$scope.assignedObject = {value: 'pre-update'}
$scope.updatedObject = {value: 'pre-update'}
// Mock ajax request
setTimeout(function() {
// This is what I'm ultimately trying to accomplish. However, myChildDirective is not properly
// showing the updated value 'post-update'.
$scope.assignedObject = {value: "post-update"}
// I noticed that this line will properly update myChildDirective, but it's not an ideal solution.
// I'm including it in the example just to show the inconsistent results in myChildDirective.
$scope.updatedObject.value = "post-update"
$scope.$apply()
}, 1000)
}
])
app.directive('myParentDirective', function() {
return {
restrict: 'E',
transclude: true,
scope: {
assignedObject: '=',
updatedObject: '='
},
template: '\
<h2>myParentDirective.assignedObject: {{assignedObject}}</h2>\
<h2>myParentDirective.updatedObject: {{updatedObject}}</h2>\
<div ng-transclude></div>\
',
controller: function($scope, $element) {
this.assignedObject = $scope.assignedObject
this.updatedObject = $scope.updatedObject
}
}
})
app.directive('myChildDirective', function() {
return {
restrict: 'E',
require: '^myParentDirective',
scope: false,
template: '\
<h2>myChildDirective.myParentDirective.assignedObject: {{myParentDirective.assignedObject}}</h2>\
<h2>myChildDirective.myParentDirective.updatedObject: {{myParentDirective.updatedObject}}</h2>\
',
link: function($scope, $element, $attrs, myParentDirective) {
$scope.myParentDirective = myParentDirective
}
}
})
最佳答案
我找到了解决我问题的方法...
问题是我在myParentDirective中将$ scope.assignedObject分配给this.assignedObject。当我这样做时，myChildDirective无法知道属性何时更改。通常，将调用$ scope。$ apply（）函数以通知所有观察者范围属性已更改，但是由于我将这个对象引用重新分配给this.assignedObject myChildDirective，所以从未收到该事件。
可以在以下位置找到最简单的解决方案：http://jsbin.com/yuyetakonowu/11/edit。基本上，这只是继承父作用域，因此我可以依靠angular的作用域发出适当的事件并相应地更新myChildDirective。
但是，这对我来说还不够好，因为我还需要myChildDirective具有独立的范围和自己的属性。这意味着我不能简单地“继承”父作用域。我已通过以下解决此问题：http://jsbin.com/yuyetakonowu/9/edit。
最终结果：
HTML：
<html ng-app='ValidationApp'>
<head>
<title>Assigning a model object after isolated scope is set doesn't work</title>
</head>
<body ng-controller='MyController'>
<h1>MyController</h1>
<h2>assignedObject: {{assignedObject}}</h2>
<h2>updatedObject: {{updatedObject}}</h2>
<my-parent-directive assigned-object='assignedObject' updated-object='updatedObject'>
<my-child-directive child-property='child-property-value'></my-child-directive>
</my-parent-directive>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js'></script>
<script src='app.js'></script>
</body>
</html>
JavaScript：
var app = angular.module('ValidationApp', [])
app.controller('MyController', [
'$scope',
'$http',
function($scope, $http) {
// Model objects loaded on page-load
$scope.assignedObject = {value: 'pre-update'}
$scope.updatedObject = {value: 'pre-update'}
// Mock ajax request
setTimeout(function() {
// This is what I'm ultimately trying to accomplish. However, myChildDirective is not properly
// showing the updated value 'post-update'.
$scope.assignedObject = {value: "post-update"}
// I noticed that this line will properly update myChildDirective, but it's not an ideal solution.
// I'm including it in the example just to show the inconsistent results in myChildDirective.
$scope.updatedObject.value = "post-update"
$scope.$apply()
}, 1000)
}
])
app.directive('myParentDirective', function() {
return {
restrict: 'E',
transclude: true,
scope: {
assignedObject: '=',
updatedObject: '='
},
template: '\
<h1>myParentDirective</h1>\
<h2>assignedObject: {{assignedObject}}</h2>\
<h2>updatedObject: {{updatedObject}}</h2>\
<div ng-transclude></div>\
',
controller: function($scope, $element) {
// Generally, exposing isolate scope is considered bad practice. However, this directive is intended
// to be used with child directives which explicitly depend on this directive. In addition, child
// directives will likely need their own isolated scope with two-way binding of properties on this scope.
this._scope = $scope
}
}
})
app.directive('myChildDirective', function() {
return {
restrict: 'E',
require: '^myParentDirective',
scope: {
childProperty: '@'
},
template: '\
<h1>myChildDirective</h1>\
<h2>childProperty: {{childProperty}}</h2>\
<h2>assignedObject: {{assignedObject}}</h2>\
<h2>updatedObject: {{updatedObject}}</h2>\
',
link: function($scope, $element, $attrs, myParentDirective) {
myParentDirective._scope.$watch('assignedObject', function(newValue, oldValue) {
$scope.assignedObject = newValue
})
myParentDirective._scope.$watch('updatedObject', function(newValue, oldValue) {
$scope.updatedObject = newValue
})
}
}
})