javascript - Angular .js : directive object in scope is always undefined

Question

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

EDIT2: fork 了之前的 plunker 并向 Controller 的逻辑添加了 $timeout，它停止工作了!猜猜这真的是加载顺序。查看:http://plnkr.co/edit/ivmGQmEHTatNzBWhppyf

我是 Angular 的新手，无法理解指令隔离范围。

我需要创建一个指令来打印出 <span/>在我的页面中，包含关于 View Controller 中的对象的信息。

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

我在这里错过了什么？

提前谢谢你们。

指令在 html View 模板中的使用:

<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

将指令的 party 范围变量包装在观察器中并等待它被初始化。在您的情况下，您不这样做，因此您的所有逻辑都在分配 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();
  })
}