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將變量傳遞給指令

回答

相關問題