AngularJS将变量传递给指令

我是angularjs的新手，正在编写我的第一个指令。我有一半的路，但我正在努力弄清楚如何将一些变量传递给指令。AngularJS将变量传递给指令

我的指令：

app.directive('chart', function() { 
    return{ 
     restrict: 'E',  
     link: function (scope, elem, attrs) {  
      var chart = null; 
      var opts = {}; 
      alert(scope[attrs.chartoptions]); 

      var data = scope[attrs.ngModel]; 

      scope.$watch(attrs.ngModel, function (v) { 
       if (!chart) { 
        chart = $.plot(elem, v, opts); 
        elem.show(); 
       } else { 
        chart.setData(v); 
        chart.setupGrid(); 
        chart.draw(); 
       } 
      }); 
     } 
    }; 
});

我的控制器：

function AdListCtrl($scope, $http, $rootScope, $compile, $routeParams, AlertboxAPI) { 
    //grabing ad stats 
     $http.get("/ads/stats/").success(function (data) { 
      $scope.exports = data.ads; 
      if ($scope.exports > 0) { 
       $scope.show_export = true; 
      } else { 
       $scope.show_export = false; 
      } 

      //loop over the data 
      var chart_data = [] 
      var chart_data_ticks = [] 
      for (var i = 0; i < data.recent_ads.length; i++) { 
       chart_data.push([0, data.recent_ads[i].ads]); 
       chart_data_ticks.push(data.recent_ads[i].start); 
      } 

      //setup the chart 

      $scope.data = [{data: chart_data,lines: {show: true, fill: true}}]; 
      $scope.chart_options = {xaxis: {ticks: [chart_data_ticks]}}; 


     }); 
}

我的HTML：

<div class='row-fluid' ng-controller="AdListCtrl"> 
    <div class='span12' style='height:400px;'> 
     <chart ng-model='data' style='width:400px;height:300px;display:none;' chartoptions="chart_options"></chart> 
     {[{ chart_options }]} 
    </div> 
</div>

我可以访问该指令$scope.data，但我似乎无法到访问$scope.chart_options数据..它的definelty被设置为如果我回显它，它会显示在页面上..

任何想法我做错了什么？

UPDATE： 出于某种原因，这个指令，如果我移动alert(scope[attrs.chartoptions]);到$表内，它首先提醒为“不确定”，然后再为合适的值，否则它总是不确定的。它可能与我用来绘制图表的jquery flot库有关吗？

干杯，本

来源

2013-05-12 Ben Kilah

尝试创建一个plunker或小提琴来隔离问题并在此共享，以便有人可以帮助 – Chandermani 2013-05-12 07:06:55

您应该只能直接在指令中访问'scope.chart_options'，因为您没有在该指令中声明新的作用域指示。 – 2013-05-12 08:05:28

一个问题，我看到的是在这里：

scope.$watch(attrs.ngModel, function (v) {

的docs on this method是不幸的是没有说清楚，但第一个参数$watch的watchExpression，需要有一个角度表达字符串或函数。所以你的情况，我认为，你需要将其更改为：

scope.$watch("attrs.ngModel", function (v) {

如果不工作，只是发布的jsfiddle或jsbin.com你的榜样。

来源

2013-05-12 09:56:32 Jonah

AngularJS将变量传递给指令

回答

相关问题