链接中未定义的 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屋！