將值從控制器傳遞給指令

Question

我正在使用angularjs創建項目。創建自定義指令時遇到問題。實際上我想將值從控制器發送到指令，但是我不確定。 這是我的代碼：

這是指令

.directive('angularData', function ($parse) {
    return {
      template: false,
      scope: {
        chart: '=lineChartData'
      },
      restrict: 'EA',
      replace: true,
      link: function postLink(scope, element,attrs) {
        var canvas, context, chart, options;
        console.log(attrs)
        console.log(scope.chart) //undefiend
        console.log(chart) //undefiend
      }
    };
});

這是我稱之為指令的HTML

<canvas id="test" angular-data ="lineChartData" height="450" width="600"></canvas>

這是控制器代碼

$scope.lineChartData = {
    labels :[1,4,8,6,8],
    datasets : [
      {
        label: "My First dataset",
        fillColor : "rgba(220,220,220,0.2)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : [1,4,8,6,8]
      }  
    ]
}

Answer 1

在指令的link函數中，放置觀察者：

 angular.module('myApp', []); angular.module('myApp').directive('angularData', function ($q, $parse) { return { //template: false, restrict: 'A', //replace: true, link: function postLink(scope, element,attrs) { scope.$watch(attrs.angularData, function(value) { console.log(value); }); } }; }); angular.module('myApp').controller("myCtl", function($scope) { $scope.lineChartData={a:2, b:"test"}; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCtl"> <canvas id="test" angular-data ="lineChartData" height="450" width="600"></canvas> </div> </div> 

Answer 2

為什么不在指令中聲明控制器？ 這樣，它將可以訪問控制器中的數據...即，

return {
  template: false,
  scope: {
    chart: '=lineChartData'
  },
  controller: SomeController,
  controllerAs: 'vm',
  ...

然后，您可以通過指令鏈接上的作用域訪問控制器的數據。

Answer 3

在你的HTML試試這個，

<canvas id="test" angular-data line-chart-data="lineChartData" height="450" width="600"></canvas>

它應該工作

Answer 4

在DOM元素內部，像這樣傳遞$ scope變量：chart = lineChartData

希望這會有所幫助。