We Keep Coding

Understanding this AngularJS directive?

I have a directive that is currently working to change a HTML class element after you've scrolled passed a part of the page. I've essentially just hacked the code together from what I found on the internet and I am having trouble understanding why or how it is working. I know if I can understand it better I can attempt to recreate it for more meaningful aspects of my project. I would appreciate any insight someone could give. Below is the Angular part:
myApp.directive('changeClassOnScroll', function ($window) {
return {
restrict: 'A', // What does this line do?
scope: {
offset: "#", // A bit confused here
scrollClass: "#" // a bit confused here
},
link: function(scope, element) {
angular.element($window).bind("scroll", function() { // understood
if (this.pageYOffset >= parseInt(scope.offset)) { // understood
element.removeClass(scope.scrollClass); // understood
console.log('Scrolled below header.');
} else {
element.addClass(scope.scrollClass); // understood
}
});
}
};
})
In the HTML;
<nav change-class-on-scroll offset="100" scroll-class="navbar-transparent" class="navbar">
<!-- Don't understand why this works at all since these two elements are
<!-- not the same names as the function above? How does the directive
<!-- know to look for 'scroll-class' even tho in the directive it is
<!-- 'scrollClass' ?
Any help would really be much appreciated as to what is going on with it.

From the documentation
At a high level, directives are markers on a DOM element (such as an
attribute, element name, comment or CSS class) that tell AngularJS's
HTML compiler ($compile) to attach a specified behavior to that DOM
element (e.g. via event listeners), or even to transform the DOM
element and its children.
What you wrote is a standard angularjs code to create a custom directive that adds some functionalities to your dom.
restrict: 'A', // What does this line do?
'A' stands for attribute. Which means you can use this as an attribute of an html element like you used for your nav. You can use any of the following restrictions in a directive.
A - Attribute => <div change-class-on-scroll></div>
C - Class => <div class="change-class-on-scroll"></div>
E - Element => <change-class-on-scroll data="book_data"></change-class-on-scroll>
M - Comment => <!--directive:change-class-on-scroll --><br/>
scope: {
offset: "#", // A bit confused here
scrollClass: "#" // a bit confused here
},
'#' is used here to bind the data from your html to directives scope. With offset="100", you are making the value 100 to be available in the directives scope, and then when you call scope.offset in your link function, you'll get the value. You can use '#', '=' or '&' to bind values to the directive based on whether it is a definite value, model data or a function.
why scroll-class when in directive it is scrollClass
It works because that's how it should be. By Angularjs naming convention, the directive name and the scope objects to bind should be in camel case in your js and should be written using dashes in your html.

restrict: 'A', // this will restrict directive only as attribute(you can only use it as attribute or it defines directive type)
scope: {
offset: "#", // # means that the changes from the controller scope will be reflected in the directive scope but if you modify the value in the directive scope, the controller scope variable will not get affected.
scrollClass: "#"
},

There are Four types of directive elements (E), attributes (A), class names (C), and comments (M).A directive can specify which of the 4 matching types it supports in the restrict property of the directive definition object.
'#' is used to pass simple values in a directive.
In Html we cannot use camel case. Therefor we use snake case instead of camel case. Hence scrollClass will be written as scroll-class.

AngularJS formatter in nested directive

I have a really weird Problem about formatters in nested directives.
I want a modelType directive for formatting.
If I don't check the "modelType", it works.
All View-Values are changed to "Formatted: ...".
But if i implement the if (attrs.modelType == "testType") { ... } it wont work, but i don't know why.
myApp.directive('modelType', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
if(attrs.modelType == "testType") {
ngModel.$formatters.push(function(value){
//formats the value for display when ng-model is changed
return 'Formatted: ' + value;
});
ngModel.$parsers.push(function(value){
//formats the value for ng-model when input value is changed
return value.slice(11);
});
}
}
};
Does anyone know this Problem?
http://jsfiddle.net/nkop2uq0/2/

First, using the attribute model-type both in the outer and inner directive led to the inner's link function getting executed twice (once for the controller-owned HTML, once for the template HTML), overwriting your formatting. So you need (or at least I think you should) disentagle the attribute for the two directives by using a different attribute for the inner directive:
template: '<div><input type="text" ng-model="ngModel" my-type="modelType" /></div>'
and consequently rename the inner directive to
myApp.directive('myType', function(){
Next, since the inner directive now does no longer get called by the compile step for the outer one, you need to compile the template for the inner directive in your post-link function
This can be done like this:
link: function (scope, element){
$compile(element.innerHtml)(scope)
}
This leads to attrs being always the same, so you can't use it to test for your testType:
$$element: U[1]
$$observers: Object
$attr: Object
myType: "modelType" <-- see here
ngModel: "ngModel"
type: "text"
Therefore you need to to look for the actual value inside scope:
if(scope.modelType == "testType") {
Lastly (and frankly I would be happy if someone could explain this to me, I don't understand it), I had to define the modelType scope property in the outer directive as one-way bound via
modelType: '#modelType'
I put this together in an updated fiddle here: http://jsfiddle.net/nkop2uq0/8/
NB: I am far from understanding the intricacies of Angular's directives. As much as I like the framework, the number of ways things can be achieved is mind-boggling. So you should try to improve my answer, it is most likely not best practice. And drop me a line if you find bad ideas in there...

Angular: Token error when expression passed to custom directive with isolated scope

(messages, code, etc, is a bit modified to explain issue)
The error:
Syntax Error: Token 'promiseObject' is unexpected, expecting [:] at column 3 of the expression [{{promiseObject?promiseObject.activeDEM:0}}] starting at [promiseObject?promiseObject.activeDEM:0}}].
Following code explains the issue:
HTML used:
<count-up id="feafdcds" duration="1" end-val='{{promiseObject?promiseObject.value:0}}' class="number" ></count-up>
The directive used has an isolated scope. if isolated scope is removed, the error goes away, BUT, then I don't know how to watch my attributes for change.
angular.module('core-metronic').directive('countUp', ['$filter',
function ($filter) {
return {
restrict: 'E',
scope: {
endVal: '='
},
link: function ($scope, $el, $attrs) {
$scope.$watch('endVal',function(newValue,oldValue)
{
if(newValue)
alert(newValue);
},true);
//...more code...
}
}
}
]);

You can not use the angular two-way-binding
endVal: '='
with an angular expression
{{promiseObject?promiseObject.value:0}}
When you use two-way-binding angular tries in case of a value change to set that new value to the binded variable.
in your case what you want to bind to endVal is not a variable but an expression. so angular does not know what to do with this.
You have two options:
In case you DO NOT need the value of endVal outside of the directive you can
use
endVal: '#'
instead and remove the evaluation braces in the template like this
<count-up id="feafdcds" duration="1" end-val='promiseObject?promiseObject.value:0' class="number" ></count-up>
this will work and set the value of endVal to either promiseObject.value or 0.
Thus you have to be careful that this will bind the value as a string hence the actual value will be either '0' or a string containing the value of promiseObject. you may have to cast this to number again somewhere else then. but this will not update the value of promiseObject outside of the directive.
In case you DO need the updated value outside of the directive in your promiseObject as promiseObject.value you have to bind endVal to a variable. so you can keep your
endVal: '='
but you will have to change the template to
<count-up id="feafdcds" duration="1" end-val='promiseObject.value' class="number" ></count-up>
This way Angular will always update the value of promiseObject.value when endVal changes. but this also means that you will have to take care that promiseObject always exists (and is an object) somewhere in your outer controller.
Furthermore you will have to apply the default value of 0 which you try to grant with your expression somewhere else. You can do this in the outer controller as well for example by initializing promiseObject by
promiseObject = {
value: 0
}

What's the use of the "attrs" parameter in an angular directive link function

Considering this directive :
.directive('myDirective', function(httpRequestTracker) {
return {
restrict: 'EA',
scope: {
myvar: "=",
},
link: function($scope, elem, attrs) {
console.log($scope.myvar, attrs.myvar);
}
};
})
and this JS console output :
> undefined undefined // if no attribute
> value value // if attribute value = "value"
What is the use of the attr parameter of the link function ? What is the difference with $scope ?
Thanks

attrs is just a raw list of attributes on a directive
scope is more sophisticated, you can use three different operators to populate it with values:
= evaluates expression in HTML, and may contain objects
# interprets value passed as string. always.
& gives you access to functions defined on parent scope

I know I'm quite late to the party, but for posterity's sake, the most crucial difference to me is that using scope: {...} in the directive's definition object (not the link function signature) creates an isolate scope within the directive element, whereas omitting the scope property altogether and manually retrieving values from attrs does not. There are plenty of cases where, for whatever reason, you don't want to make a new scope but you still need the value of some attribute.

How do I pass many values to an Angularjs directive?

I'm creating a reusable bit of html via a directive. The html would have a few variables that I want passed from the original scope. This is done easily by declaring attributes on the directive, then creating an isolate scope and capturing them. The question is, is there a better way to do this for a larger number of variables? I had thought of passing in an object like {firstAttr: $scope.one, secondAttr: $scope.two...} and picking this object apart to get each piece. This works the first time, but the two-way databinding doesn't work (even using the '=').
The problem is the thing that is bound is the object, not each of the individual parts of the object. Could I maybe use the compile function in the directive to add each of the attributes to the element or something? so:
<mydirective databinding="{one:'first one', two:'second one'}">
would be translated into:
<mydirective one="first one" two="second one">
That way my databinding would work as expected by capturing the attributes in the directive. How would I go about accomplishing that design, or is there just another way completely to do this?

The databinding directive idea is an interesting one but it's not the way I would do it since I believe you'd run into directive priority issues, plus the fact that it's very non-standard and would make your code hard to follow for future programmers. There's several ways to do this so I'll discuss 3 different solutions I've used.
Solution 1
If you only need one way data binding, the simplest solution is to use angular's scope.$eval function on the string representation of the object inside your directive after interpolating any simple scope variables on it using {{}}. The string representation doesn't even have to be valid JSON, since you'll notice in the example below I don't include quotes around the object keys.
In the view:
<div databinding="{one:'first', two:{{scopeVar}}, complex:[1,2, "Hi"]}"></div>
And in the javascript:
app.directive('databinding', function () {
return{
link: function (scope, elm, attrs) {
console.debug(scope.$eval(attrs['databinding']));
}
}
});
Solution 2
Another one-way data binding solution is to create an option object inside the controller and pass it to the directive using "#" (or even "="):
In the controller:
$scope.options = {one: "first, two: "second"};
In the view:
<div databinding="options"></div>
And in the javascript:
app.directive('databinding', function () {
return{
scope: {
options: "#" //Can also use = here
},
link: function (scope, elm, attrs) {
console.log(scope.options);
}
}
});
Solution 3
If you do need two way data binding, you're mostly out of luck, as there's no elegant way to do it. HOWEVER, if you're in the market for hackish solutions, you can accomplish two way data binding with a method very similar to solution 2 but with a change to the option object.
Instead of declaring an option object containing simple primitive data types like strings, create a dummy object inside the option object, which you then declare your variables inside of. Doing it this way, changes to scope variables in your controller will also be realized inside the directive, as demonstrated through the timeouts.
Controller:
$scope.someScopeVar = "Declared in controller"
$scope.options = {
dummy: {
one: $scope.someScopeVar,
two: "second"
}
}
window.setTimeout(function(){
$scope.someScopeVar = "Changed in controller";
}, 2000)
View:
<div databinding="options"></div>
Directive:
app.directive('databinding', function () {
return{
scope: {
options: "=" //You need to use = with this solution
},
link: function (scope, elm, attrs) {
console.log(scope.options.dummy.one); //Outputs "Declared in controller"
window.setTimeout(function(){
console.log(scope.options.dummy.one) //Outputs "Changed in controller"
}, 5000)
}
}
});
This method works since javascript passes objects by reference whereas primitives are copied. By nesting an object in an object the data binding is preserved.

You can change scope in directive as follows
.('mydirective ', function(){
var linker = function(scope, element){
console.log(scope.one, scope.two);
}
return {
link: linker,
scope: {one:"=", two:"="}
}
});

The question is, is there a better way to do this for a larger number of variables?
I don't think so. As you already found out, trying to pass them as one object results in the object being databound, not the individual parts.
Even if you could get something working with $compile, it would not be obvious to other people reading your code what is going on.
Another option is to either not create a scope (scope: false, which is the default for directives), or create a new child scope (scope: true), but require that the calling scope must use certain scope property names to use the directive. Then you don't have to specify any attributes. This makes the directive's use much more restrictive, but I think those are your two choice: specify multiple attributes, or require certain scope property names.