The directive does not work from the controller. how to fix it?
baseapp.directive('loading', function () {
alert('loading');
return {
restrict: 'E',
replace: true,
template: '<div class="loading">loading</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val) {
element.addClass('show');
alert('show');
} else {
element.addClass('hide');
alert('hide');
}
});
}
}
});
baseapp.controller ('ListCtrl', function ($scope, $http) {
$scope.loading = true;
$http.get('/blog').success(function(data) {
$scope.users = data;
$scope.loading = false;
});
});
When you load a directive called. from the controller $ scope.loading = true;
Nothing happens
What I noticed is that your adding a class over and over element.addClass('show'); resulting in if true and later false: class='show hide show hide ...' and so forth, one quick way to correct this is to remove one of the classes or you can toggle class:
.directive('myDir', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="loading">loading</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val===true) {
element.addClass('show');
element.removeClass('hide');
} else {
element.toggleClass('hide');
element.removeClass('show');
}
});
}
}
});
Other than that it seems to be working just fine on my end:
Online Demo
Note: I recommend you not to use alerts for debugging use console.log instead.
If you read the official documentation: https://docs.angularjs.org/guide/directive
You can read this:
The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
If you want to use it as a class like you do, then you have to specify :
require: 'C'
Related
I have angular directive that looks like this
app.directive('paymentsTable', ['$watch', function($watch) {
return {
replace: true,
restrict: 'EACM',
templateUrl: '../views/paymentTable.html',
link: function(elem, attr, scope) {
console.log(elem.$parent.payments); // array
scope.$watch(function(elem) { return elem.$parent.payments }, function(value, oldValue) {
});
}
};
}]);
It gives me
angular.js:13920Error: [$injector:unpr]
When I rewrite first line like this
app.directive('paymentsTable', [ function() {
It gives me another error
angular.js:13920TypeError: o.$watch is not a function
I also use uglify. So, my question is: what is going on here?
The $watch function is part of scope that is handed to you in the link method, therefore there is no need to inject it. The reason you get the second error is the order of the link arguments. Try it like this:
app.directive('paymentsTable', function() { // no need for injection
return {
replace: true,
restrict: 'EACM',
templateUrl: '../views/paymentTable.html',
link: function(scope, element, attrs) { // The correct arguments order
console.log(elem.$parent.payments);
scope.$watch(function(elem) { return elem.$parent.payments }, function(value, oldValue) {
});
}
};
});
I want to make my directive multiple selectors.
My directive is alerting every tap.
I already wrote this code:
angular
.module('app.directives')
.directive('onTap', someDirective)
.directive('button', someDirective);
someDirective.$inject = ['$ionicGesture'];
function someDirective($ionicGesture) {
return {
restrict: 'EA',
link: link
};
function link($scope, $elem, $attrs) {
$ionicGesture.on('tap', function() {
alert('Tapped!');
}, $elem);
}
}
This code problem is this button for example:
<button on-tap="doSomething()">Do something</button>
Because this button tap will alert twice!
I can even solve if i change the directive:
.directive('someDirective', someDirective);
But it means I have to add it to every button or [onTap] selector.
Any good solution?
You can try this:
function someDirective($ionicGesture) {
var directive = {
restrict: 'EA',
link: link
};
return directive;
function link($scope, $elem, $attrs, ctrls) {
if (directive.name === 'onTap' && $elem.is('button')) {
return;
}
$ionicGesture.on('tap', function() {
alert('Tapped!');
}, $elem);
}
}
I am trying to write a simple custom directive in Angular that turns a tag into a toggle button (similar to a checkbox). The code I have written so far updates the internal variable (isolated scope) but the two way binding doesn't seem to work. When I click the button, the button toggles (the css class is appearing and disappearing) but myVariable is not updating.
Any help much appreciated!
Usage
<button toggle-button="myVariable">My Button</button>
Directive code
( function() {
var directive = function () {
return {
restrict: 'A',
scope: {
toggleButton: '=checked'
},
link: function( $scope, element, attrs ) {
$scope.$watch('checked', function(newVal, oldVal) {
newVal ? element.addClass ('on') : element.removeClass('on');
});
element.bind('click', function() {
$scope.checked = !$scope.checked;
$scope.$apply();
});
}
};
};
angular.module('myApp')
.directive('toggleButton', directive );
}());
just replace
scope: {
toggleButton: '=checked'
}
to
scope: {
checked: '=toggleButton'
}
Your directive scope is looking for an attribute that doesn't exist.
Try changing:
scope: {
toggleButton: '=checked'
},
To
scope: {
toggleButton: '='
},
The difference is that =checked would look for the attribute checked whereas = will use the same attribute as the property name in the scope object
Will also need to change the $watch but you could get rid of it and use ng-class
As charlietfl said, you don't need that checked variable. You are making changes to it instead of the external variable.
Here is a fixed version:
angular.module('components', [])
.directive('toggleButton', function () {
return {
restrict: 'A',
scope:{
toggleButton:'='
},
link: function($scope, $element, $attrs) {
$scope.$watch('toggleButton', function(newVal) {
newVal ? $element.addClass ('on') : $element.removeClass('on');
});
$element.bind('click', function() {
$scope.toggleButton = !$scope.toggleButton;
$scope.$apply();
});
}
}
})
angular.module('HelloApp', ['components'])
http://jsfiddle.net/b3b3qkug/1/
I understand that I can dynamically set a templateUrl base on an option DOM attribute template-url="foo.html" given the following code:
angular.module('foo').directive('parent', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// code
},
templateUrl: function(elem,attrs) {
return attrs.templateUrl || 'some/path/default.html'
}
}
});
However, I need to take this a step further and pass this string one level deeper, to a child directive.
Given this HTML:
Usage in Main project
<parent parent-template="bar.html" child-template="foo.html"></parent>
The child will not be exposed in most cases, so if child-template is set, it needs to implicitly replace templateUrl for all child <child></child> elements that are located in the parent foo.html.
The require: '^parent' attribute passes data from scope to scope, but I'm not seeing this available in templateUrl when it's declared.
foo.html
<h1>Title</h1>
<child ng-repeat="item in array"></child>
Directives
angular.module('foo').directive('parent', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// code
},
templateUrl: function(elem,attrs) {
return attrs.parentTemplate || 'some/path/default.html'
},
scope: {
childTemplate: '=childTemplate'
}
}
})
.directive('child', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// code
},
templateUrl: function(elem,attrs) {
return ??? // parent.attribute.childTemplate? || 'some/path/default.html'
},
require: '^parent',
scope: {
childTemplate: '=childTemplate'
}
}
});
Update
The old answer (see bellow) won't work because it's only possible to access the controller of the required directives inside the link functions, and the templateUrl function gets executed before the link functions.
Therefore the only way to solve this is to handle everything in the templateUrl function of the child directive. However this function only takes 2 arguments: tElement and tArgs.
So, we will have to find the element of the parent directive and access the attribute child-template. Like this:
angular.module('testApp', [])
.directive('parent', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
},
transclude:true,
templateUrl: function(elem,attrs) {
return attrs.parentTemplate || 'default.html'
}
}
})
.directive('child', function() {
return {
restrict: 'E',
require:'^parent',
templateUrl: function(elem,attrs) {
//if jQuery is loaded the elem will be a jQuery element, so we can use the function "closest"
if(elem.closest)
return elem.closest("parent").attr("child-template") || 'default.html';
//if jQuery isn't loaded we will have to do it manually
var parentDirectiveElem=elem;
do{
parentDirectiveElem=parentDirectiveElem.parent();
}while(parentDirectiveElem.length>0 && parentDirectiveElem[0].tagName.toUpperCase()!="PARENT");
return parentDirectiveElem.attr("child-template") || 'default.html';
}
}
});
Example
Old Answer
Since you are isolating the scope, you could try this, it's a bit hacky but I guess that it should work:
angular.module('foo').directive('parent', function() {
return {
restrict: 'E',
controller: function($scope) {
this.childTemplate=$scope.childTemplate;
},
link: function(scope, element, attrs) {
},
templateUrl: function(elem,attrs) {
return attrs.parentTemplate || 'some/path/default.html'
},
scope: {
childTemplate: '#'
}
}
})
.directive('child', function() {
return {
restrict: 'E',
require: '^parent',
link: function(scope, element, attrs, parentController) {
if(parentController.childTemplate)
element.data("childTemplate", parentController.childTemplate);
},
templateUrl: function(elem,attrs) {
return elem.data("childTemplate") || 'some/path/default.html'
}
}
});
In my question, I was attempting to provide an override for the templateUrl of an off-the-shelf directive that didn't have one. My original question doesn't mention this, however, I wanted to add this as a reference to others who may have forgotten, as I did. Angular allows you to decorate directives and override their properties.
app.config(function($provide) {
$provide.decorator('child', function($delegate) {
var directive = $delegate[0];
directive.templateUrl = 'path/to/custom.html';
return $delegate;
});
});
Whats the best way to assign a new value through a directive? A two way databinding.
I have a fiddle here where i tried. http://jsfiddle.net/user1572526/grLfD/2/ . But it dosen't work.
My directive:
myApp.directive('highlighter', function () {
return {
restrict: 'A',
replace: true,
scope: {
activeInput: '='
},
link: function (scope, element, attrs) {
element.bind('click', function () {
scope.activeInput = attrs.setInput
})
}
}
});
And my controller:
function MyCtrl($scope) {
$scope.active = {
value : true
};
}
And my view:
<h1 highlighter active-input="active.value" set-input="false">Click me to update Value in scope: {{active}}</h1>
So what i wanna do is update the scope.active with the given attribute setInput.
Any ideas what I'm doing wrong here?
With element.bind you leave the realm of Angular, so you need to tell Angular that something had happened. You do that with the scope.$apply function:
scope.$apply(function(){
scope.activeInput = attrs.setInput;
});
here is an updated jsfiddle.