AngularJS，在指令的传入内容内分配与更新范围时的不一致's的孤立范围
AngularJS, inconsistencies when assigning versus updating scope within the transcluded content of a directive's isolated scope
JSBin示例：http://jsbin.com/yuyetakonowu/1/edit?html，js，输出
摘要：我有两个指令（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
})
}
}
})
相关文章：
- 当属性不一致时，如何根据属性对JS对象列表进行排序
- Android和JavaScript解析API之间不一致
- Javascript的行为与PHP包含文件不一致
- 对这种与document.domain和CORS相关的不一致行为的解释是什么
- 点击链接行为不一致
- Passport.js`isAuthenticated(）`不一致的行为;当它应该是真的时候是假的
- 与显示不一致
- Ext 4.2.1 模型日期解析在浏览器之间不一致
- 通过 Dropbox API 上传时的文件内容不一致
- JavaScript - 对象属性不一致
- Javascript 混淆了 null、instanceof 和 typeof 的语法不一致
- localeCompare 显示使用前导变音字符对单词进行排序时不一致的行为
- SVG 对象部分上的 JQuery click(） 不一致
- Angular:从工厂更新范围不起作用
- 使用forEach和.shift(）时结果不一致
- Window.open浏览器的高度不一致
- 不同浏览器中的LinkButton PageMethod行为不一致
- 当活动处于后台时，Android WebView不一致
- 使用正则表达式删除标记时，Firefox和Chrome之间存在不一致
- AngularJS，在指令的传入内容内分配与更新范围时的不一致's的孤立范围
