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

在你的指令中的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"}; });函数内，放一个观察者：

＆＃13;

<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>

＆＃13;

checkedListBox1

＆＃13;

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

希望这会有所帮助，祝你好运。

将值从控制器传递到指令

4 个答案: