I have a directive in isolated scope and i define a couple of variables in link function of the directives so the template fails to bind to these variables but templateUrl seems to bind to these variables easily... what is the reason for this?
mymodule.directive("directive1", function () {
return {
require: '^widget',
// template: '<div><h1 > {{editMessage}}</h1></div>',
templateUrl: "dummy.htm",
scope: {
},
link: function (scope, element, attrs) {
scope.editMessage = "Click to edit";
});
}
});
my dummy.htm has the same piece of code as in template contents:-
<div><h1 > {{editMessage}}</h1></div>
the binding happens when i use templateUrl but not when i use template why is it so? is the execution flow different for both of these?
the problem is you're not integrating well the scope variable, it should be and this example:
mymodule.directive('myAlertaSeguimientoButton', function() {
return {
restrict: 'A',
scope: {
myParamElemento: '=',
myParamUrl: '#',
myParamSeguir: '#',
myParamDejarSeguir: '#',
myParamSiguiendo: '#',
myParamRefrescaMapa: '#'
},
template: '<button ng-class="(!myParamElemento.siguiendo)?\'btn btn-default seguir\':\'btn btn-default seguir siguiendo activeButtonAzul\'" class="btn btn-default seguir" ng-click="seguirNoSeguir(myParamUrl)"><span class="icon-seguir estadoUno">[[myParamSeguir]]</span><span class="icon-siguiendo icon-w estadoDos">[[myParamSiguiendo]]</span><span class="estadoTres">[[myParamDejarSeguir]]</span></button>',
controller: ['$scope', 'Service', function($scope, Service) {...
And in the html:
<span my-param-elemento="angular-var" my-param-url="angular-var" my-alerta-seguimiento-button></span>
Related
I have a directive that displays an icon with a little cross. When the user clicks on this cross, a callback should be called.
Here's the code of the directive template:
<div class="item" title="{{name}}">
<button type="button" class="close">
<span ng-click="onDelete()">×</span>
</button>
<span class="glyphicon glyphicon-folder-open"></span>
</div>
The Javascript of the directive:
angular.module('hiStack').directive('hsItem', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'item.tpl.html',
scope: {
onDelete: '&',
title: '#'
}
};
});
Finally, the code that uses the directive:
<hs-item on-delete="deleteGroupModal = true" title="TestTitle"></hs-item>
deleteGroupModal = true is never called when I click on the cross. If I pass a function instead like deleteGroup(), it works.
How can I pass an assignment like we usually do with ng-click for example?
Thank you.
As Igor Janković said, it's better to pass a function than to write it directly on the attribute.
That said, it's possible to eval the expression passed on the attribute like this:
angular.module('hiStack').directive('hsItem', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'item.tpl.html',
scope: {
title: '#'
},
link: function(scope, element, attrs) {
scope.onDelete = function() {
// Eval the code on the parent scope because directive's scope is isolated in this case
if (attrs.onDelete) scope.$parent.$eval(attrs.onDelete);
}
}
};
});
I am novice in AngularJS. I want to use one template for two directives. In deal, the first directive overrides the behavior of the second. But I've specified different controllers for each of them. I think the reason is isolation of scopes by controllers. I need that the first controller execute its own filterChanged() function and so does the second controller. Same with fields: montage, pay, cancel and inactivity. I tried to manipulate the scope (true, 'isolate', false, {}), transclude (true, false, 'element'), scope fields ('#', '=', '&'). 'controllerAs' and 'controllerBindTo' are unsuitable for my task, because I want to this throw separate controller files.
Help me plz. Hands fall.
Source code below.
filter.html
<div class="filter">
<p class="text-center"><b ng-bind="::title"></b></p>
<div class="contact-item-requires-filter">
<div class="contact-item-require">
<input id="contact-item-montage-filter" class="contact-item-require-montage" type="checkbox"
ng-model="filter.montage"
ng-change="filterChanged()">
<label title="Монтажи" for="contact-item-montage-filter"></label>
</div>
</div>
directive1.js
angular.module('qualityControl')
.directive('requiresFilterDirective', function() {
return {
templateUrl: '../templates/pages/quality/filter.html',
controller: 'requiresFilterController'
}
});
directive2.js
angular.module('qualityControl')
.directive('usersFilterDirective', function() {
return {
templateUrl: '../templates/pages/quality/filter.html',
controller: 'usersFilterController'
}
});
UPDATED.
Add variable with '&', this is function declaration
.directive('requiresFilterDirective', function () {
return {
restrict: 'AE',
scope: {
functionToCall: '&',
someData: '='
},
templateUrl: '../templates/pages/quality/filter.html',
link: function (scope, elem, attrs) {
scope.functionToCall();
console.log('scope.someData', scope.someData);
}
}
})
Usage:
<requires-filter-directive function-to-call="myFunctOne()" some-data="yourJsonObject"></requires-filter-directive>
<requires-filter-directive function-to-call="myFunctTwo()" some-data="yourJsonObject"></requires-filter-directive>
And declare these functions in your main controller:
$scope.myFunctOne = function() {
alert("111")
};
$scope.myFunctTwo = function() {
alert("222")
};
$scope.yourJsonObject = {'aaa':123};
I have created a directive like this
.directive('optionLabel', function() {
'use strict';
return {
replace: true,
restrict: 'AE',
template: '<div class="error-msg col-xs-12 intelligent-group col-centered"><h1 translate>{{ optionLabel }}</h1></div>'
};
})
Right now the Scope optionLabel is set in each of the controllers that uses this directive as such.
$scope.optionLabel = labelService.getOptionLabel(search.searchType);
How could I set this in the directive directly, rather than doing this code repeated in like 5 controllers ?
You can use link in which you have access to your scope :
.directive('optionLabel', function() {
'use strict';
return {
replace: true,
restrict: 'AE',
template: '<div class="error-msg col-xs-12 intelligent-group col-centered"><h1 translate>{{ optionLabel }}</h1></div>',
link: function(scope, element, attrs) {
scope.optionLabel = labelService.getOptionLabel(search.searchType);
};
})
Don't forget to inject labelService in your directive.
I am working on multiple directive, this is already existing framework so I dont want to disturb the existing components.
This is my HTML
<div title="test" mydirective>
This is my directive, this has templateUrl with it and this template has another directive getting loaded.
.directive('myDirective', function ($filter) {
restrict: 'A',
replace: true,
transclude: true,
scope: {
title: '#'
},
templateUrl: 'partial/partialtemplate.tpl.html'
});
My Partial Template html looks like this
<div newdirective title="{{title}}"></div>
This is my newdirective
.directive('newDirective', function ($filter) {
restrict: 'A',
replace: true,
transclude: true,
scope: {
title: '#'
},
templateUrl: 'partial/newpartialtemplate.tpl.html',
controller: function ($scope, $attrs) {
//here if I try to print my title I still get {{title}}
console.log($attrs.title);
}
});
So what could the issue be, I the second directive being called even before the template data is written or anything wrong?
I want to know how to invoke a function residing in controller on the ng-click event of template element. I have to use this directive in many pages.Hence I need to handle the click event in respective controller pages.The below code invokes the click function (moreitemdetails) residing within the directive.I tried setting the scope as moreitemdetails: '=' . It is also not working.
I have been using the directive
app.directive('groceryList', function){
return {
restrict: 'E',
scope: {
array: '=',
listItemClick:'&',
moreitemdetails: '&',
},
templateUrl: 'list.html',
link: function(scope, element, attrs) {
scope.label = attrs.label;
scope.listItemClick=function(e){
$(e.currentTarget).find('.next-items').slideToggle('fast');
}
scope.moreitemdetails=function(name,type){
//other code
}
}
};
});
The call for directive is
<grocery-list array="items"></grocery-list>
This is the template file
<div ng-click="listItemClick($event)">
<div>
<div class="item">
<span class="item-details">
{{array[0].Item}}
</span>
<span class="down-arrow"></span>
</div>
<div class="next-items">
<ul>
<li class="item" ng-repeat="list in array">
<div class="item-details" ng-click="moreitemdetails(list.Name,list.Type)">{{list.Item}}</div>
</li>
</ul>
</div>
Is there a way to get around?
I also would like to know the use of $location within another directive. Quoting the previous example (everythin is same except the directive definition and action in moreitemdetails() )
app.ui.directive('groceryList', ['$location', function(location){
return {
restrict: 'E',
scope: {
array: '=',
listItemClick:'&',
moreitemdetails: '&',
},
templateUrl: 'list.html',
link: function(scope, element, attrs) {
scope.label = attrs.label;
scope.listItemClick=function(e){
$(e.currentTarget).find('.next-items').slideToggle('fast');
}
scope.moreitemdetails=function(name,type){
$location.path('/home/');
}
}
};
}]);
Thanks in advance
So by declaring
scope: {
array: '=',
listItemClick:'&',
moreitemdetails: '&',
},
you are creating an isolated scope for your directive. One solution might be to not declare this scope in your directive. This would mean that your ng-click="moreitemdetails(list.Name,list.Type) would trigger the function on your controllers scope.
Alternatively you could use an emit and listener. To do this, in your directive you could call:
scope.moreitemdetails=function(name,type){
var deets = {
name: name,
type: type
};
scope.emit('moreitemdetails',deets)
}
Then in your various controllers you implement:
scope.$on('moreitemdetails',function(event,details){
// do some code with your name and type
}
I'm not sure exactly what you would like to know about $location, if you could be a bit more specific I might be able to help a more.
Hope this helps in some way!
EDIT:
The directive without any scope declared would look like this:
return {
restrict: 'E',
templateUrl: 'list.html',
link: function(scope, element, attrs) {
scope.label = attrs.label;
scope.listItemClick=function(e){
$(e.currentTarget).find('.next-items').slideToggle('fast');
}
scope.moreitemdetails=function(name,type){
//other code
}
}
};