AngularJS范围值在链接中未定义

2019年8月6日 188次阅读

我正在尝试在初始化指令时找出具有范围和链接的东西.我在树控制器中有一个指令,用于在分支点显示详细信息：

<typelists sub="branch.subBranches[0]"></typelists>

处理该分支信息的(相关部分)指令如下：

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(); } );
            }
        };

现在,让我感到困惑的是,在// DEBUG行中,我可以看到.branch仅在范围的输出中按预期填充,但scope.branch显示为undefined.
这意味着当我尝试在下面设置scope.subject时,而不是从父类型返回一个typeId,我得到’未定义’,所以而不是获得一个独特的分支标记,如’Type1Lists’我得到’ TypeundefinedLists’,因此我的$watch表功能无法正常触发.

为什么我无法访问scope.branch或为什么在我尝试时显示为未定义？ (特别是当我可以在同一个console.log输出中看到它作为范围的一部分？)

在此先感谢您的帮助.

最佳答案 branch.subBranches [0]如何填充？我敢打赌,这个值是在指令的link函数运行之后设置的.

您可以使指令适应这些更改,如下所示：

var unwatch = scope.$watch("scope.branch", function(v){
  if (v) {
    unwatch(); // removes the watch when value is not undefined
    init(); // run your init code
  }
});

或者,仅在数据准备好时实例化指令：

<typelists ng-if="branch.subBranches[0] !== undefined" 
           sub="branch.subBranches[0]"></typelists>

附：

console.log显示数据的原因是因为(至少在Chrome中)控制台“渲染”在记录时没有发生 – 换句话说,当你调用console.log时数据仍然没有,但它在控制台读取它之前到达那里以进行渲染.

点赞