链接中未定义的 AngularJS 范围值 [英] AngularJS scope values undefined in link
问题描述
我试图在指令初始化时找出具有范围和链接的内容.我在树控制器中有一个指令来显示分支点的详细信息:
I'm trying to figure out something with scope and link when a directive is initialized. I have a directive in a tree controller to display details at a branch point:
<typelists sub="branch.subBranches[0]"></typelists>
处理该分支信息的(相关部分)指令如下:
The (relevant parts of the) directive that handles that branch info are below:
listsApp.directive(
'typelists',
function($rootScope) {
return {
restrict: 'EA',
replace: true,
scope: {
branch : '=sub'
},
templateUrl: templateDir + '/typelists.html',
link: function (scope, element, attrs) {
console.log(scope,scope.branch); // DEBUG
// other stuff
// (including a working reload() and refresh() methods)
scope.subject = 'Type' + scope.branch.model.getFilter() + 'Lists';
// catch $rootScope.$broadcasts for this branch
$rootScope.$on( scope.subject+'Refresh', function() { scope.refresh(); ) } );
$rootScope.$on( scope.subject+'Reload', function() { scope.reload(); } );
}
};
现在,让 bajeezus 感到困惑的是,在//DEBUG 行中,我可以看到 .branch 仅在范围的输出中按预期填充,但 scope.branch 显示为未定义.这意味着,当我尝试在下面设置 scope.subject 时,不是从父类型获取 typeId,而是获取 'undefined',因此我得到的不是唯一的分支标记,例如 'Type1Lists'TypeundefinedLists',因此我的 $on watch 函数没有正确触发.
Now, what is confusing the bajeezus out of me is that in the // DEBUG line, I can see .branch populated as expected in the output of the scope alone, but scope.branch shows as undefined. This means that when I try to set scope.subject down below, instead of getting a typeId back from the parent type, I'm getting 'undefined' so instead of getting a unique branch tag such as 'Type1Lists' I'm getting 'TypeundefinedLists', thus my $on watch functions aren't triggering properly.
为什么我无法访问 scope.branch 或者为什么在我尝试时它显示为 undefined?(特别是当我可以在同一个 console.log 输出中看到它作为范围的一部分时?)
Why am I unable to access scope.branch or why is it showing as undefined when I try? (especially when I can see it in the same console.log output as part of scope?)
在此先感谢您的帮助.
推荐答案
branch.subBranches[0]
如何填充?我敢打赌,该值是在指令的 link
函数运行之后设置的.
How does branch.subBranches[0]
get populated? I bet that value is set just after the link
function of the directive runs.
您可以使指令适应这些更改,如下所示:
You can either make the directive resilient to these changes, like so:
var unwatch = scope.$watch("scope.branch", function(v){
if (v) {
unwatch(); // removes the watch when value is not undefined
init(); // run your init code
}
});
或者,仅在数据准备好时才实例化指令:
Or, only instantiate the directive when the data is ready:
<typelists ng-if="branch.subBranches[0] !== undefined"
sub="branch.subBranches[0]"></typelists>
附言
console.log
显示数据的原因是(至少在 Chrome 中)控制台渲染"不会在登录时发生 - 换句话说,当您调用 console.log
数据仍然不在那里,但它在控制台读取它以进行渲染之前到达那里.
The reason console.log
shows the data is because (at least in Chrome) the console "rendering" doesn't happen at the time of logging - in other words, when you call console.log
the data is still not there, but it gets there before the console reads it for rendering purposes.
这篇关于链接中未定义的 AngularJS 范围值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!