[フレーム]
Last Updated: February 25, 2016
·
628
· apelbaur

angularjs directive api

suppose you're using angular and you have a directive that you pass data to:

<my-chart data="chartData"></my-chart>

suppose the directive needs to perform some logic when data changes. you'll probably use $watch:

angular.module('app')
.controller('MainController', function($scope){
 function dataChange(){
 $scope.chartData= {...};
 }
})
.directive('myChart', function(){
 return {
 scope: {data: '='},
 link: function(scope){
 function redraw(){...}
 scope.$watch('data', redraw);
 }
 };
});

the problem with this solution is that it's dependent on angular's $digest loop.

here is a way to invoke the directive's redraw() directly from the controller:

angular.module('app')
.controller('MainController', function($scope){
 $scope.chartApi= {};//empty object
 function dataChange(){
 $scope.chartData = {...};
 $scope.chartApi.redraw();
 }
})
.directive('myChart', function(){
 return {
 scope: {data: '=', api: '='},
 link: function(scope){
 function redraw(){...}
 scope.api.redraw = redraw;
 }
 };
});

and in html:

<my-chart data="chartData" api="chartApi"></my-chart>

AltStyle によって変換されたページ (->オリジナル) /