angular 视图中的数组深度监视 (html)
Array deep watch in angular view (html)
这是我的看法 (html):
<my-directive collection="currentData"></my-directive>
这是数据结构:
$scope.currentData = [...
{
"name": "lala Page",
"icon": "icon-docs",
"sub_data": [
{
"name": "1-article",
"href": "/1-article",
"icon": "fa fa-pencil"
},
{
"name": "2-article",
"href": "/2-article",
"icon": "fa fa-pencil"
},
{
"name": "3-article",
"href": "/3-article",
"icon": "fa fa-pencil"
}
...
]...
}]
在 my-directive 内有 bind-once 个元素(在 sub_data 上)。
如果所有数组发生变化 - 视图发生变化,
但是当我更改 sub_data 时,视图不会更新。
任何想法,如何使 collection 受到 sub_data 变化的影响?
(我确实想使用尽可能少的观察者)
编辑
添加 my-directive 代码:
angular.module('my_module',[]).directive('myDirective', function(){
return {
scope:{
collection: '='
},
replace: true,
template: ['<li my-directive-item ng-repeat="item in collection" raw-model="{{::item}}">',
'</li>'].join('')
};
});
我在collection上没有手表,只有上面的代码。我的意思是 angular 不会更新 collection 绑定,除非我更改数组本身,并且我希望它在我更改 [= 中的项目的子 属性 时更新视图39=].
好的,我解决了。我对这个解决方案并不感到自豪,但它确实有效:
控制器内部:
$scope.updateArray = function() {
...
// Do stuff with tempData
...
// Trick for updating the view - because of the bind-once sub items
$scope.currentData = [];
$timeout(function(){
$scope.currentData = tempData;
}, 0);
};
这是我的看法 (html):
<my-directive collection="currentData"></my-directive>
这是数据结构:
$scope.currentData = [...
{
"name": "lala Page",
"icon": "icon-docs",
"sub_data": [
{
"name": "1-article",
"href": "/1-article",
"icon": "fa fa-pencil"
},
{
"name": "2-article",
"href": "/2-article",
"icon": "fa fa-pencil"
},
{
"name": "3-article",
"href": "/3-article",
"icon": "fa fa-pencil"
}
...
]...
}]
在 my-directive 内有 bind-once 个元素(在 sub_data 上)。 如果所有数组发生变化 - 视图发生变化, 但是当我更改 sub_data 时,视图不会更新。 任何想法,如何使 collection 受到 sub_data 变化的影响?
(我确实想使用尽可能少的观察者)
编辑
添加 my-directive 代码:
angular.module('my_module',[]).directive('myDirective', function(){
return {
scope:{
collection: '='
},
replace: true,
template: ['<li my-directive-item ng-repeat="item in collection" raw-model="{{::item}}">',
'</li>'].join('')
};
});
我在collection上没有手表,只有上面的代码。我的意思是 angular 不会更新 collection 绑定,除非我更改数组本身,并且我希望它在我更改 [= 中的项目的子 属性 时更新视图39=].
好的,我解决了。我对这个解决方案并不感到自豪,但它确实有效:
控制器内部:
$scope.updateArray = function() {
...
// Do stuff with tempData
...
// Trick for updating the view - because of the bind-once sub items
$scope.currentData = [];
$timeout(function(){
$scope.currentData = tempData;
}, 0);
};