在链接未定义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显示为未定义。
这意味着，当我尝试设置，而不是从父类型得到一个TYPEID跌破scope.subject下来，我越来越未定义这样反而得到一个独特分支标签，如Type1Lists我得到' TypeundefinedLists'，因此我对手表的功能$无法触发正常。

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或者为什么当我尝试它显示为未定义？ （尤其是当我可以看到它在相同的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?)

感谢您事先的任何帮助。

Thanks in advance for any help.

推荐答案

如何 branch.su​​bBranches [0] 获取填充？我敢打赌，价值就在链接后置指令功能的运行。

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>

P.S。

究其原因的console.log 显示数据是因为（至少在铬）控制台渲染并不在伐木的时候发生的 - 换句话说，当你调用的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屋！