We Keep Coding

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...

How to get the original attribute name before it was normalized/denormalize an attribute name?

I want to create a directive that I can use on <select> elements, to tell it to populate the <select> with a globally known list that's dynamically updated and shared among all the components in the app.
I envision using it like so:
<select ng-model="listentry" select-the-list></select>
Here's how I'm going about it so far:
.directive('selectTheList', function ($compile, ListData) {
return {
restrict: 'A',
priority: 1000,
terminal: true,
link: function (scope, el, attributes) {
var child = scope.$new();
child.listData = ListData.theList;
el.attr('ng-options', 'listItem.name for listItem in listData track by listItem.id');
el.removeAttr('select-the-list'); /**** ATTENTION ****/
$compile(el)(child);
}
};
});
That is, I assign an ng-options attribute that does what I want, based on the scope that I set up for this purpose, and then $compile it.
This works great. But note the line I commented with ATTENTION: This assumes that the user used <select select-the-list>, which then got normalized to selectTheList and used this directive. However, according to the directive docs:
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows: [... snip ...]
For example, the following forms are all equivalent and match the ngBind directive:
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
That is, if a user does <select select:the:list>, then the directive will be applied, element.removeAttr('select-the-list') will not work, and I'll get an infinite loop.
This may be an XY problem, which is why I provided all this context. But if this is a good way to do it - what's the best way to find the actual attribute on the element that caused my directive to be called, so I can remove it before re-compiling it?

The creators of angular did indeed envision the need for this. The attributes passed into your link function is not just a map, but an instance of $compile.directive.Attributes. It contains an $attr property:
Properties
$attr
A map of DOM element attribute names to the normalized name. This is needed to do reverse lookup from normalized name back to actual name.
Thus, your ATTENTION line should be:
el.removeAttr(attributes.$attr['selectTheList']);

This is XY problem indeed, because the subject is avoiding recursive compilation.
There are some tricks to handle this.
One of them is to make use of the fact that the only place where DDO object is available as this is compile:
...
compile: function (element, attrs) {
attrs.$set(this.name, null);
// so the appearance of 'compile' won't require nesting link fn
return this.link;
},
link: ...
And changing directive's name or pasting its code won't cause inconsistencies.
Another one is more generic and is particularly useful if removing an attribute isn't applicable for some reason or the directive isn't an attribute:
link: function (scope, element) {
...
if (element.data('$recursion')) {
element.data('$recursion', false);
} else {
element.data('$recursion', true);
$compile(element)(scope);
}
}

How to pass a variable from $scope into a directive, and reverse?

I am currently trying to implement a directive that should make some DOM elements blink. For that, I am using $timeout to set visibility of the element to either visible or hidden. My problem is that if in the $timeout call I hard-code a value (say '500') everything runs smoothly. But if I try to pass this parameter thanks to a variable, I get the element blinking extremely fast, as if no parameter was entered (default value is '0').
HTML
<button class="btn btn-key"><span class="blink" blinkSpeed='500'>Q</span></button>
{{displayBlinkSpeed}}
JS
.directive('blink',function($timeout){
return{
restrict:'ACE',
transclude: true,
scope:{
blinkSpeed: '='
},
link: function(scope,element,attrs){
function showElement(){
var speed = parseInt(scope.blinkSpeed);
element.css("visibility","visible");
$timeout(hideElement,speed);
scope.displayBlinkSpeed = speed;
}
function hideElement(){
var speed = parseInt(scope.blinkSpeed);
element.css("visibility","hidden");
$timeout(showElement,speed);
scope.displayBlinkSpeed = speed;
}
showElement();
},
template: '<span ng-transclude></span>',
replace: true
};
});
Also, I forgot to mention that {{displayBlinkSpeed}} in the HTML is not showing anything either.
My guess would be that my directive is not able to communicate (receive/send) information to the DOM. Unfortunately, I have not found a way to make it work. Have I missed/misunderstood something?

First of all, {{displayBlinkSpeed}} would not show anything, since displayBlinkSpeed is only defined within the isolate scope of the directive - it's undefined outside of it.
And as for blinkSpeed - when you bind to an attribute, Angular normalizes the attribute name, so scope: {blinkSpeed: "="} is bound to blink-speed="500" attribute (not blinkSpeed="500" attribute). Without it, $scope.blinkSpeed === undefined, and parseInt(undefined) === NaN, which results in flickering.
Change the HTML to:
<span class="blink" blink-speed='500'>Q</span>
Somewhat off-topic:
1: You don't need to do parseInt(scope.blinkSpeed) since "=" would correctly resolve to an integer. So, the following would work just as well:
$timeout(hideElement, $scope.blinkSpeed);
2: since you don't intend to modify the blink speed within the directive, it is wasteful to do two-way binding with "=" - instead use one-way binding to an expression with "&":
scope: {
blinkSpeed: "&",
},
link: function(scope){
var speed = scope.blinkSpeed();
$timeout(hideElement, speed);
}

Is it possible to pass 'required' into an AngularJS directive?

I'm making a custom auto-complete directive that uses an <input> within itself, but I'm having a bit trouble figuring out how to pass the 'required' attribute down, other attributes that have values I can see but 'required' appears to be blank whether it is set or not. The first part of my return statement below:
return {
restrict: 'E',
template: tpl,
replace: true,
scope: {
suggestionsPath: '=autoComplete',
method: '#method',
term: '#term',
required: '#required',
ngModel: "="
}...
thanks!

I've built a few extensions to inputs and the best (arguably) only way to extend existing ngModel bindings is using the ngModelController in your directive. You can require another directive's controller by using the "require" property. The documentation for ngModelController is here
This will allow you to get/set the model values as well as extend or replace the validation behavior as needed. Because you are now probably extending in combination AngularJS input directives you will also probably want to look at the input directives inside AngularJS for examples of how this work. They also can work in tangent with the ngFormController as a parent for the whole form. This took me a while to grasp so be patient but it is by far the best way to do this.
I would avoid isolate scopes here, they can be tricky, don't always play well with other directives (so typically only use it on new elements or things where only one directive will exists on it's own). I would design something like this:
return {
restrict: 'E',
template: tpl,
replace: true,
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
// Use attrs to access values for attributes you have set on the lement
// Use ngModelController to access the model value and add validation, parsing and formatting
// If you have an attribute that takes an expression you can use the attrs value along with $scope.$watch to check for changes and evaluate it or the $parse service if you just want to evaluate it.
}
I recommend getting as familiar as you can with directive design as custom inputs can get pretty tricky depending on what they do (we have built custom inputs that add +/- buttons as well as ones that format numbers as percentages, currencies or just numbers with commas while you type into them). Aside from the ngModelController docs these are useful to review:
Egghead.io tutorials
The AngularJS code for input directives and forms

Required is a bit of a funny attribute by itself (see here Setting an attribute named "required" and any value, with JQuery, doesn't work). You will likely have a lot of trouble passing any sort of value through on this as its effect is determined by whether it is present, not by its value. Different browsers will treat it differently and may rewrite the value.
You will also have trouble because both required and ngModel are directives that will be compiled on your element if they are provided. required will talk to ngModel and you will need to implement ngModel properly if you want things to work.
A simpler option is to rename required and ngModel to other names. e.g. myRequired and myNgModel. You can then bind ng-model directly to scope.myNgModel and bind an ng-required to myRequired.

I know this is an old question, but for others who come looking (which is how I ended up here):
you can pass the required tag to the directive to be read as a boolean, and then use that value in ng-required.
return {
restrict: 'E',
template: tpl,
replace: true,
scope {
required:'#'
}
Then in your directive template you would use it as
<input type="text" ng-required="required" />
Either the attribute 'required' is found and is then set to true in the directive, or the attribute is not found which will be interpreted by ng-required as a false value

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.