angularjs - 如何在指令Angular js的链接函数中确定变量初始化顺序

Question

我对如何在 Angular js 中解决以下场景感到困惑。我需要在页面加载时绘制一个图表，所以我在指令的链接函数中执行此操作。但我对如何确定变量初始化的顺序感到困惑。在下面的示例中，它作为声明的顺序工作，但它在我的实际代码中没有按顺序工作。

在此处查看示例代码

对 drawBarGraph() 的第一次调用失败，因为变量 graphType 尚未初始化。那么，有没有更好的方法来做到这一点。

Answer 1

http://plnkr.co/edit/x2TiI4Usa9EN8QkyiWZ9?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('test', function(){

    return{
        restrict:'E', 
        scope:{
            data:'@',
            graphtype:'@graphtype'
        },
        template:'<div></div>',
        link:function(scope,element,attr){
          scope.graphType = attr['graphType'];
          scope.value = attr['data'];

            attr.$observe('graphtype', function(value) {
                if (value) {
                    scope.graphType=value;
                    scope.drawBarGraph()
                  }
            });

            attr.$observe('data', function(value) {
                if (value) {
                    scope.value=value;
                    scope.drawBarGraph()
                }
            });
         scope.drawBarGraph=function()
         {
             if(!scope.value || !scope.graphType)
                  return; //not enough information to proceed maybe log this
             console.log(scope.value);
             console.log(scope.graphType);
         }

        }
    }
})

我最初在链接函数中提取了变量，因此如果它们已经设置，那么它们将填充在指令的范围内。

我还交换了观察的顺序，但最好在继续之前检查是否在函数中设置了所有值。