How to call a directive's function from the controller on Angular
Question
I have a directive that controls a personalized multiselect. Sometimes from the main controller I'd like to clear all multiselects. I have the multiselect value filling a " filter " bidirectional variable, and I am able to remove content from there, but when doing that I also have to change some styles and other content. In other words: I have to call a method belonging to the directive from a button belonging to the controller. Is that even posible with this data structure?:
(By the way, I found other questions and examples but their directives didn't have their own scope.)
function MultiselectDirective($http, $sce) {
return {
restrict: 'E',
replace: true,
templateUrl: 'temp.html',
scope: {
filter: "=",
name: "@",
url: "@"
},
link: function(scope, element, attrs){
//do stuff
scope.function_i_need_to_call = function(){
//updates directtive template styles
}
}
}
}
2 answers
solution1
1 ACCPTED 2016-02-05 11:36:10
The best solution and the angular way - use event .
Live example on jsfiddle .
angular.module('ExampleApp', []) .controller('ExampleOneController', function($scope) { $scope.raise = function(val){ $scope.$broadcast('raise.event',val); }; }) .controller('ExampleTwoController', function($scope) { $scope.raise = function(val){ $scope.$broadcast('raise.event',val); }; }) .directive('simple', function() { return { restrict: 'A', scope: { }, link: function(scope) { scope.$on('raise.event',function(event,val){ console.log('i`m from '+val); }); } } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="ExampleApp"> <div ng-controller="ExampleOneController"> <h3> ExampleOneController </h3> <form name="ExampleForm" id="ExampleForm"> <button ng-click="raise(1)" simple> Raise 1 </button> </form> </div> <div ng-controller="ExampleTwoController"> <h3> ExampleTwoController </h3> <form name="ExampleForm" id="ExampleForm"> <button ng-click="raise(2)" simple> Raise 2 </button> </form> </div> </body>
solution2
0 2016-02-05 11:02:55
I think better solution to link from controller to directives is this one:
// in directive
return {
scope: {
controller: "=",
},
controller: function($scope){
$scope.mode = $scope.controller.mode;
$scope.controller.function_i_need_to_call = function(){}
$scope.controller.currentState = state;
}
}
// in controller
function testCtrl($scope){
// config directive
$scope.multiselectDirectiveController = {
mode: 'test',
};
// call directive methods
$scope.multiselectDirectiveController.function_i_need_to_call();
// get directive property
$scope.multiselectDirectiveController.currentState;
}
// in template
<Multiselect-directive controller="multiselectDirectiveController"></Multiselect-directive>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.