I want to call a function in controller from directive.
my directive
.directive('multEcs', ['$http', function($http){
return{
restrict: 'A',
replace:false,
link: function(scope, elem, attr){
scope.addToArray();
}
}
}]);
Method in controller
$scope.addToArray = function(){
console.log('method called');
}
Try passing in the function you want to call to your directive.
.directive('multEcs', ['$http', function($http){
return{
restrict: 'A',
replace:false,
scope : {
myFunctionToCall : '='
},
link: function(scope, elem, attr){
scope.myFunctionToCall();
}
}
}]);
The first way is one-way binding between controller and directive:
JS:
angular.module('App',[])
.directive('multEcs', [function(){
return{
restrict: 'A',
replace: false,
scope: {
addToArray: '&'
},
link: function($scope, elem, attr){
$scope.addToArray();
}
}
}])
.controller('HomeCtrl', ['$scope', function($scope){
$scope.addToArray = function(){
console.log('method called');
}
}])
HTML:
<div ng-app="App">
<div ng-controller="HomeCtrl">
<div mult-ecs add-to-array="addToArray()">multEcs</div>
</div>
</div>
The second way is creating isolated scope in the diretive with personal controller. Recomended for communications between directives:
JS:
angular.module('App',[])
.directive('multEcs', [function(){
return {
restrict: 'A',
replace: false,
controller: 'HomeCtrl',
scope: {},
link: function($scope, element, attrs, ctrl){
ctrl.addToArray();
}
}
}])
.controller('HomeCtrl', ['$scope', function($scope){
this.addToArray = function(){
console.log('method called');
};
}]);
HTML:
<div ng-app="App">
<div>
<div mult-ecs>multEcs</div>
</div>
</div>
Related
I want to call a function of Controller from Directive, It is for validation. But i'm a bit confused about how to call it from Directive when i'm using isolated scope. Here is the code of directive:-
App.directive('test',function(){
return{
require: "ngModel",
scope:{
a:"=",
b:"=",
c:'=',
d:'='
},
link: function(scope, element, attributes,modelVal )
{
modelVal.$validators.test= function(val)
{
return false;
//isolated scope values will make if condition true or false.
if(scope.a=="true"){
//I need to call a function of controller here. But how can
//i call that function from directive? this is my problem
}
}
scope.$watch("a", function()
{
modelVal.$validate();
});
}//end of link function;
}//end of return;
});//end of directive;
Function is in my controller, i think i don't need to write the controller code. In my html , I'm calling this directive as:
<test a="1" b="2" c="3" d="4" ng-model="abc"></test>
What changes i need to do in my directive to call the controller function which is $scope.testFunction()?
var module = angular.module('myModule', []);
module.controller('TestController', function($scope){
$scope.text = 'test';
// Will be invoked from 'test' directive
$scope.alertMe = function(text){
alert(text);
};
});
module.directive('test', function(){
return {
restrict: 'E',
template: '<input ng-model="text" ng-change="onChange(text)" />',
scope: {
text: '='
},
link: function(scope, elem, attr){
scope.onChange = function(text){
// Invoking parent controller function
scope.$parent.alertMe(text);
}
}
}
})
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myModule" ng-controller="TestController">
<test text="text"></test>
</div>
</body>
</html>
I have given a sample, try like this.
Controller:
module.controller('TestController', function($scope){
$scope.onTextChange = function(text){
alert(text);
};
})
HTML:
<test my-func="onTextChange(text)"></test>
Directive:
module.directive('test', function(){
return {
restrict: 'E',
template: '<input ng-model="text" ng-change="onChange(text)" />',
scope: {
myFunc: '&'
},
link: function(scope, elem, attr){
scope.onChange = function(text){
if(typeof scope.myFunc === 'function'){
// Calling the parent controller function
scope.myFunc({text: text});
}
}
}
}
})
I have the following code, but I couldn't make to work, I want to pass a simple string to "parent" directive from "child" directive. Here is http://jsfiddle.net/fpax1hx7/
HTML:
<div ng-app=myApp>
<div ng-controller=MyCtrl>
<directive1></directive1>
</div>
</div>
JavaScript:
'use strict';
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) { }])
.directive('directive1', function () {
return {
restrict: 'E',
scope: { stringtest: '=' },
template: '<directive2 stringtest="stringTest"></directive2>',
link: function (scope, element, attrs) {
console.log(scope.stringTest);
}
}
})
.directive('directive2', function () {
return {
restrict: 'E',
scope: { stringTest: '=' },
link: function (scope, element, attrs) {
scope.stringtest="This is a Test";
}
}
}]);
There was a typo. You are using stringtest instead of stringTest and you are not passing any model to directive1
'use strict';
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function($scope) {
console.log('from controller');
}])
.directive('directive1', function() {
return {
restrict: 'E',
scope: {
stringTest: '='
},
template: '<directive2 string-test="stringTest"></directive2>',
link: function(scope, element, attrs) {
console.log('from directive1');
console.log('string test from directive 1:' + scope.stringTest);
scope.$watch('stringTest', function(nv, ov) {
if (nv !== ov) {
console.log('string test from directive 1 after directive2 scope binded:' + scope.stringTest);
}
});
}
}
})
.directive('directive2', function() {
return {
restrict: 'E',
scope: {
stringTest: '='
},
link: {
pre: function(scope) {
scope.stringTest = "This is a Test";
},
post: function(scope, element, attrs) {
console.log('from directive2');
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=myApp>
<div ng-controller=MyCtrl>
<directive1 string-test="sample"></directive1>
{{sample}}
</div>
</div>
In a directive i want to require a controller but i get the error that the controller can't be found. I am sure it is a small thing or maybe it is not possible the way i want to do it.
angular.module('myApp', []);
angular.module('myApp').controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
//some function here returning data
}]);
angular.module('myApp').directive('yoloswag', function() {
return {
require: ['^?ngModel', '^GreetingController'],
restrict: 'A',
scope: {
},
link: function(scope, element, attrs, controllers) {
var modelCtrl = controllers[0],
greetingsCtrl = controllers[1];
console.log(controllers)
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="GreetingController">
{{ greeting }}
<div yoloswag>test</div>
</div>
</div>
What am i doing wrong?
Thank you so much!
Your code does not having and dependency with your main module, that's why you are getting that error.
Your code should be the following
angular.module('myApp', [])
.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
//some function here returning data
}])
.directive('yoloswag', function() {
return {
require: ['^?ngModel', '^GreetingController'],
restrict: 'A',
scope: {
},
link: function(scope, element, attrs, controllers) {
var modelCtrl = controllers[0],
greetingsCtrl = controllers[1];
console.log(controllers)
}
};
});
or set a variable for main module then you can add controller and directive with the main module like,
var MainModule = angular.module('myApp', []);
MainModule.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
//some function here returning data
}]);
MainModule.directive('yoloswag', function() {
return {
require: ['^?ngModel', '^GreetingController'],
restrict: 'A',
scope: {
},
link: function(scope, element, attrs, controllers) {
var modelCtrl = controllers[0],
greetingsCtrl = controllers[1];
console.log(controllers)
}
};
});
You can use controller property of directive :
make sure don't update property in link function.
return {
restrict: 'A',
scope: {
},
controller : 'GreetingController',
link: function(scope, element, attrs) {
var modelCtrl = controllers[0],
greetingsCtrl = controllers[1];
console.log(controllers)
}
};
In my custom directive im getting attributes values, in my case it could be numbers or arrays, but in my directtive im getting a string array (ex: "[1,2]".
How can i get my array in the attribute not being a string?
view:
<div my-directive to=[1,2]
directive:
angular.module('myApp')
.directive('myDirective',
[
'$http', '$q','$uibModal',
dir
]);
function dir($http, $q, UserService, $uibModal) {
return {
restrict: 'A',
link: function($scope, element, attrs, controller) {
element.on( 'click', function( evt ){
console.log(attrs.to);
});
}
};
}
Try following approach:
On view (init the directive & set the directive param)
<div ng-app='demo'>
<demo-directive to-val='[1,2,3,4,5]'></demo-directive>
</div>
On the directive
var demo = angular.module('demo', []);
demo.directive('demoDirective', function($parse) {
return {
restrict: 'E',
template: '<div ng-repeat="val in toVal">{{val}}</div>',
link: function (scope, element, attrs, controller) {
// parse the attribute array to a scope params
scope.toVal = JSON.parse(attrs.toVal);
}
}
});
I have wrote a directive which has a link function which isnt beeing called, the templae is injected to the DOM
function() {
'use strict';
// Define the directive on the module.
// Inject the dependencies.
// Point to the directive definition function.
angular.module('app').directive('nvVideo', ['$window', nvVideo]);
function nvVideo ($window) {
// Usage:
//
// Creates:
//
var directive = {
link: function(scope, element, attrs) {
alert('ggg');
},
restrict: 'EA',
template: '<div id="slot1">video slot</div>'
};
return directive;
}
})();
HTML
<div ng-app='app'>
<n-video></n-video>
</div>
Directive
angular.module('app', [])
.directive('nVideo', ['$compile', function ($compile) {
return{
restrict: 'EA',
template: '<div id="slot1">video slot</div>',
link: function(scope, element, attrs) {
alert('ggg');
}
}
}]);
JSFIDDLE