从控制器传递值到指令

我正在创建项目，使用angularjs.I创建自定义指令时出现问题。其实我想从控制器发送值到指令，但我得到了未定义。这里是我的代码：从控制器传递值到指令

下面是指令

.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] 
     } 
    ] 
}

来源

2016-06-20 angular

这也不适用 – angular

里面的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) { 
 
     \t scope.$watch(attrs.angularData, function(value) { 
 
     \t console.log(value); 
 
     }); 
 
     } 
 
    }; 
 
    }); 
 
angular.module('myApp').controller("myCtl", function($scope) { 
 
\t $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>

来源

2016-06-20 10:22:45 AlexanderMP

相同的结果值显示我undefiend – angular

@ AlexanderMP：我想在一页上多次使用此指令 – angular

是的，你可以这样做。这个'link'函数对于每个元素都是单独的。这是*正确的*方式阅读指令。我使用了与自定义验证场景类似的代码。你可以访问'element'来获取画布。 – AlexanderMP

你为什么不申报指令中的控制器？这样，将有来自控制器访问数据...即，

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

然后，你必须通过指令的链接范围访问控制器的数据。

来源

2016-06-20 11:40:02 rrd

在你的HTML试试这个，

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

它应该工作

来源

2016-06-20 12:07:10

里面你DOM元素通过你的$ scope变量是这样的：图表= lineChartData

希望这有助于gokd运气。

来源

2016-06-20 12:43:36

从控制器传递值到指令

回答

相关问题