I have some custom directive and I've bound ng-model and ng-change directives info this.
Example:
<custom-directive ng-model="users" ng-change="changed()">
</custom-directive>
directive after execute contains some inputs, textareas etc. I want to execute function bound into ng-change, changed() always when something is changed in this inputs, textareas.
Can I execute ng-change from directive controller or link?
Like this for example:
.directive('customDirective', function () {
return {
restrict: 'E',
replace: true,
require: 'ngModel',
templateUrl: 'src/template.html',
link: function (scope, elem, attrs, ngModel) {
executeNgChange();
}
};
})
You should be able to bind the function in ng-change in your directive using angular's Scope Function Expression Binding:
.directive('customDirective', function () {
return {
restrict: 'E',
replace: true,
require: 'ngModel',
scope: {
change: '&ngChange'
}
templateUrl: 'src/template.html',
link: function (scope, elem, attrs, ngModel) {
scope.change(); // or use ng-change="change()" in your directive template
}
};
})
I haven't tested this myself but hopefully it helps you.
Related
I've created some basic directive. It works well if I use it with some objects in html file
<some-directive some-data="123"></some-directive>
But if I dynamically load this object to my webpage:
//getting html source as a string, then appending it to DOM:
elem.html("<some-directive some-data='123'></some-directive>");
The directive doesn't work (object is being added properly to DOM)
app.directive('someDirective', function (notes, parts) {
return {
restrict: 'AE',
scope: {
someData: '='
},
link: function (scope, elem, attrs) {
console.log("directive fired");
}
};
});
What can I do to make it work properly?
For dynamic directives, you have to use $compile service that compiles scope into template. Look at sample below, <some-directive-wrapper /> will add <some-directive /> element into itself and compile scope value
var app = angular.module('app', []);
app.directive('someDirective', function () {
return {
restrict: 'AE',
scope: {
someData: '='
},
template: '<h2>someDirective compiled, someData is {{someData}}</h2>',
link: function (scope, elem, attrs) {
console.log("directive fired");
}
};
});
app.directive('someDirectiveWrapper', function ($compile) {
return {
restrict: 'AE',
link: function (scope, elem, attrs) {
//get value from ajax maybe
//and set to scope
scope.data = 123;
//replace directive with another directive
elem.html('<h1>someDirectiveWrapper compiled </h1>\n<some-directive some-data="data"></some-directive>');
//compile scope value into template
$compile(elem.contents())(scope);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<some-directive-wrapper></some-directive-wrapper>
</div>
I have the following code:
.directive('ticketingChat', function() {
return {
restrict: 'E',
templateUrl: '/Reply/ReplyScreen',
scope: {},
controller: "TicketController",
link: function (scope, el, attr, ctrl) {
if (attr["ticketid"]) {
ctrl.loadTicketById(attr["ticketid"]);
}
}
}
})
I am trying to call the "loadTicketById" in my controller. However I can't seem to get an instance of the controller in the linking function whatever I do.
Other than that, the controller works in the directive.
I've a custom directive called "mycomponent".
restrict: 'AE',
templateUrl: 'template.html',
scope:{
sTransactionType: '=transactionType',
sStorageVariable: '=storageVariable'
},
link: function(scope, element, attrs){
console.log("attrs.transactionType:: "+attrs.transactionType);
console.log("scope.sTransactionType:: "+scope.sTransactionType);
And markup as:
<my-component transaction-Type="FundTransfer" storage-Variable="FundTransferToday"></my-component>
Now, when I try to access the value of attributes transaction-Type and storage-Variable in link function of directive, it returns undefined.
Values can be accessed by attrs.transactionType but not able to get it with scope.sTransactionType.
I tried to change attribute name, scope varibale name.
How do I get custom directive attribute values in scope variables ?
Updated code:
var fundtransfer = angular.module("fundtransfer",['mydirectives']);
var controllers = {};
controllers.cntFundTransfer = function($scope, $rootScope){
}
var mydirectives = angular.module("mydirectives",['Constants']);
mydirectives.directive('myComponent', function($rootScope){
restrict: 'AE',
templateUrl: 'template.html',
scope:{
sTransactionType: '=transactionType',
sStorageVariable: '=storageVariable'
},
link: function(scope, element, attrs){
console.log("scope.sTransactionType:: "+scope.sTransactionType);
}
}
<my-component transaction-type="FundTransfer" storage-variable="FundTransferToday"></my-component>
Your attribute naming is wrong.
all should be in lowercase
try like this
<my-component transaction-type="FundTransfer" storage-variable="FundTransferToday"></my-component>
JS
restrict: 'AE',
templateUrl: 'template.html',
scope:{
sTransactionType: '=transactionType',
sStorageVariable: '=storageVariable'
},
link: function(scope, element, attrs){
console.log("scope.sTransactionType:: "+scope.sTransactionType);
}
I have a directive called formNavHandler to handle dirty checking and navigation from page to page. formNavHandler relies on a controller called CoolFormCtrl and a form called coolForm. I want to pass both CoolFormCtrl and coolForm to the link function of formNavHandler
angular.module('cool').directive('formNavHandler', [
'$log', function($log) {
return {
restrict: 'A',
scope: {
disabled: '=coolFormDisabled'
},
controller: 'CoolFormCtrl',
require: 'form',
link: function(scope, elem, attrs, WhatsThis) {
$log.log(WhatsThis);
...
}
};
}
]);
used like so:
<form name="coolForm" form-nav-handler=true cool-form disabled="!CurrentUser.canUpdate">
...
</form>
My issue is that I cannot figure out how to pass both form and CoolFormCtrl through the link function.
If I comment out the require:'form' line then WhatsThis = CoolFormCtrl:
With the require:'form' line uncommented WhatsThis = coolForm
And when trying to pass a 5th parameter WhatsThis = coolForm and AndThis = undefined
controller: 'CoolFormCtrl',
require: 'form',
link: function(scope, elem, attrs, WhatsThis, AndThis) {
$log.log(WhatsThis);
$log.log(AndThis);
Is there any way to pass both a controller and required form to a directives link function?
Try:
angular.module('cool').directive('formNavHandler', [
'$log', function($log) {
return {
restrict: 'A',
scope: {
disabled: '=coolFormDisabled'
},
require: ['formNavHandler', 'form'],
controller: 'CoolFormCtrl',
link: function(scope, elem, attrs, WhatsThis) {
$log.log(WhatsThis);
...
}
};
}]);
WhatsThis will be an array of controllers.
I'm trying to access a transcluded element in an element directive from a different inner directive applied within the first directive's template.
My (trivial example) setup:
Element directive
.directive('elementDirective', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: 'template.html',
link: function (scope, elem, attr, ctrl, transclude) {
elem.find('transclusion').replaceWith(transclude());
}
};
})
Template
<div inner-directive>
<div id="transclusion"></div>
</div>
Inner Directive
.directive('innerDirective', function() {
return {
restrict: 'A',
link: function (scope, elem, attr, ctrl) {
//Do something here with child elements (which will be transcluded).
var some = elem[0].querySelector('[name]');
//...
}
};
})
Html
<element-directive>
<input name="input_name" />
</element-directive>
My Error:
I get an error of the kind.
element-directive element has no child input elements with a 'name' attribute
I'm assuming this means that the inner directive is compiled, linked, whatnot, before transclusion happens. So, how can I achieve what I'm trying to do?