Angular.js:范围中的指令对象始终未定义

Question

编辑:分叉@EliteOctagon的plunker奇怪它正在工作!无法理解为什么下面的代码不是.http://plnkr.co/edit/y8uvulA9RHQ1Y9mwzin1

编辑2:分叉前一个plunker并为控制器的逻辑添加$ timeout,它停止工作!猜猜它真的是在加载订单.看看:http://plnkr.co/edit/ivmGQmEHTatNzBWhppyf

我是棱角分明的新手,无法让我的脑袋缠绕在指令隔离范围内.

我需要创建一个指令,<span/>在我的页面中打印出一个关于视图控制器中的信息和对象的信息.

我试图做的是隔离指令范围并通过具有双向绑定的属性传递对象(参见下面的代码).但是,当试图link在指令函数中访问对象时,它总是以未定义的形式出现.

我在这里错过了什么？

提前谢谢你们.

在html视图模板中使用指令:

<party-starts party="party"></party-starts>

指令JS代码

.directive('partyStarts', function(){
    return {
        restrict: 'E',
        template: '<div id="partyStart><i class="icon ion-pin"></i> </div>',
        scope: {
            party: '='
        },
        link: function(scope, el) {
            var party = scope.party;
            var icon = el.find('i');
            var statusStr = angular.element('<span/>');
            var final;

            console.log('scope '+scope);

            if(party.Diatodo){
                if(party.datahora.isSame(moment(), 'day') || party.datahora.isSame(moment().add(1, 'd'), 'day')){
                    icon.css({
                        'color': 'green'            
                    });
                    statusStr.text(' É hoje');
                    el.append(statusStr);
                }else{
                    icon.css({
                        'color': '#999'            
                    });
                    statusStr.text(' Começa em '+party.datahora.fromNow());
                    el.append(statusStr);
                }
                return;
            }

            if(party.datahora.unix() == party.datahoraf.unix()){
                final = party.datahora.clone().add(1, 'd').hour(6);
            }else{
                final = party.datahoraf;
            }

            if(party.datahora.twix(final).isCurrent()){
                icon.css({
                    'color': 'green'            
                });
                statusStr.text(' Começou há '+party.datahora.fromNow());
                el.append(statusStr);
            }else if(party.datahora.twix(final).isFuture()){
                icon.css({
                    'color': '#999'            
                });
                statusStr.text(' Começa em '+party.datahora.fromNow());
                el.append(statusStr);
            }else{
                icon.css({
                    'color': 'red'            
                });
                statusStr.text(' Já terminou');
                el.append(statusStr);
            }
        }
    };
})

Answer 1

我不认为这是加载顺序的问题.据我所知,您提供的代码应该起作用.这是一个带有一个工作示例的plunker:http://plnkr.co/edit/Bsn3Vyjrmb311b8ykzU1还有一个 登录到控制台,它验证scope.party在加载时使用正确的值初始化.

单击实时预览(右侧边栏上的"眼睛图标")以查看示例.

此外,这是一个图表,在我的推特上显示,前几天我发现这对于以可理解的方式解释隔离范围非常有用.希望这可以帮助 :-)

Answer 2

将指令的派对范围变量包装在观察程序中并等待它被初始化.在您的情况下,您不执行此操作,因此在分配scope.party之前运行所有逻辑.

link: function(scope, el) {

  var watcher = scope.$watch('party', function() {
    if(scope.party === undefined) return;

    // at this point it is defined, do work

    // delete watcher if appropriate
    watcher();
  })
}