How to apply a directive after a transclusion in AngularJS - javascript

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?

Related

Directives in object created during app lifetime doesn't work

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>

AngularJS - trigger ngChange?

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.

Not able to get custom directive attribute value

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);
}

Update $watch using require in angular directive

as an angular newbie this is my problem
If I have two directives in HTML like this
<parent-dir param="par">
<child-dir></child-dir>
</parent-dir>
and in JS like this (in parent)
app.directive('parentDir', function(){
return {
restrict: 'E',
scope: {
param: '='
}
}
})
and in child
app.directive('childDir', function(){
return {
restrict: 'E',
require: '^parentDir',
controller: function($scope, $element){
<-- SHOULD I PUT WATCHER HERE -->
},
link: function(scope, element, attrs, parentdirCtrl){
<-- SHOULD I PUT WATCHER HERE -->
}
}
})
where in the child directive should I make an optional $watch in order to catch all changes to the param model?
Off course if I use $watch in the parent controller, all changes in the param are reflected in the parent directive but I can`t seem to find a way to pass this information to child directive.
You should place it inside the link function which have access of the parent controller using 4th parameter of link function parentdirCtrl. Actually you don't need to worry about the params variable because it uses = two way binding inside directive that does update the value in both parent controller scope & directive scope. Additionally you need define controller in your parentDir directive so that the scope of parentDir directive shared with the childDir.
Code
app.directive('childDir', function() {
return {
restrict: 'E',
require: '^parentDir',
template: '<div class="test">INner {{param}}</div>',
controller: function($scope, $element) {
},
link: function(scope, element, attrs, parentdirCtrl) {
scope.$watch('param', function(newVal, oldVal) {
console.log(newVal);
}) //true only if its object.
}
}
})
Demo Plunkr

How to access child ngModel reference in directive link?

I'm using bootstrap-colorpicker in combination with an angular directive.
Inside my form is colorpicker which I want to watch for changes.
As the value of the colorpicker is updated by this colorpicker jQuery plugin this does not work. I understand I have to implement this in my directive but can't figure out how.
Inside my I have the following markup:
<div data-colorpicker class="input-group colorpicker-element">
<input id="background" type="text" class="form-control" data-ng-model="myModel.background" />
<span class="input-group-addon"><i></i></span>
</div>
This markup is needed by bootstrap-colorpicker. Note I added data-colorpicker directive which initializes the colorpicker with:
myDirectives.directive('colorpicker', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.colorpicker();
}
};
});
So far so good. Note that the colorpicker is hooked up on wrapping div, which I thin kis causing my problem.
I extended the code to something like:
myDirectives.directive('colorpicker', function() {
return {
restrict: 'A',
require : '?ngModel',
link: function(scope, element, attrs, ngModel) {
element.colorpicker().on('changeColor', function(ev) {
scope.$apply(function() {
ngModel.$setViewValue(ev.color.toHex());
});
});
}
};
});
but the problem is the ngModel is defined on the input and not on the wrapping div.
Can I access the child scope/ngModel?
The easiest way is to wrap all the html in a directive.
The template:
<div class="input-group colorpicker-element">
<input id="background" type="text" class="form-control" data-ng-model="ngModel" />
<span class="input-group-addon"><i></i></span>
</div>
Directive code:
myDirectives.directive('colorpicker', function() {
return {
restrict: 'E',
require : '?ngModel',
scope: {
'ngModel': '='
},
link: function(scope, element, attrs, ngModel) {
element.colorpicker().on('changeColor', function(ev) {
scope.$apply(function() {
ngModel.$setViewValue(ev.color.toHex());
});
});
},
templateUrl: '/partials/colorpicker.html'
};
});
Then you can use it in controller:
<colorpicker ng-model="myModel.background" />

Categories