I want to create a custom directive that is an attribute that requires an attribute value similar to how ng-repeat takes a list of items. For example,
<div myDir="{{someList}}"></div>
How is this done?
You should do it like this
app.directive('myDir', function () {
return {
scope: {
'myDir' : '#', //'#' for evaluated value of the DOM attribute,
//'=' a parent scope property
},
link: function (scope, element, attrs) {
scope.$watch('myDir', function (newVal) {
console.log('myDir', newVal);
});
}
};
});
usage for evaluated value (with '#')
<div my-dir="{{someList}}"></div>
usage for property from a scope (with '=')
<div my-dir="someList"></div>
to understand difference between '#' and '=' look here
Related
I made a custom directive that retrieves data from a controller.
My variable is visible inside the scope element but when trying to access it, I got undefined
HTML
<map borders="vm.borders"></map>
Directive
angular.module('myApp.directives')
.directive('map', [ function() {
return {
restrict: 'E',
scope: {
borders: '='
},
link: function(scope, element, attrs) {
console.log(scope); //cfr linked image
console.log(scope.borders) //undefined
}
}
}]);
Here is the scope. It contains the borders variable.
What am I missing to retrieve this borders value ?
I could suggest to add an ng-if to the directive, because for example if vm.borders are got from a promise, ng-if is required:
<map borders="vm.borders" ng-if="vm.borders"></map>
I'm trying to generate a smart-table directive from within a custom directive I've defined:
<div ng-controller="myContrtoller">
<containing-directive></containing-directive>
</div>
The directive definition:
angular.module('app')
.directive('containingDirective', function() {
return {
restrict: 'E',
replace: true,
template: '<table st-table="collection" st-pipe="scopeFun"></table>',
link: function(scope, elem, attrs) {
scope.scopeFun = function () {
// solve the misteries of life
}
}
}
});
As you can see my directive tries to replace the element by the template generated by the st-table directive, using the st-pipe directive depending on the first, briefly:
ng.module('smart-table')
.controller('stTableController' function () {
// body...
})
.directive('stTable', function () {
return {
restrict: 'A',
controller: 'stTableController',
link: function (scope, element, attr, ctrl) {
// body
}
};
})
.directive('stPipe', function (config, $timeout) {
return {
require: 'stTable',
scope: {
stPipe: '='
},
link: {
pre: function (scope, element, attrs, ctrl) {
var pipePromise = null;
if (ng.isFunction(scope.stPipe)) { // THIS IS ALWAYS UNDEFINED
// DO THINGS
}
},
post: function (scope, element, attrs, ctrl) {
ctrl.pipe();
}
}
};
});
Problem:
The st-pipe directive checks the scope var stPipe if it is defined or not by: if (ng.isFunction(scope.stPipe)). This turns out to be ALWAYS undefined. By inspecting I found two things:
From the stPipe directive, the value supposed to be scope.stPipe that is my scopeFun defined within my containingDirective is undefined on the scope object BUT defined within the scope.$parent object.
If I define my $scope.scopeFun within the myContrtoller I don't have any problem, everything works.
Solution:
I did find a solutions but I don't know what really is going on:
Set replace: false in the containingDirective
Define the scope.scopeFun in the pre-link function of containingDirective
Questions:
Why is the scopeFun available in the stPipe directive scope object if defined in the controller and why it is available in the scope.$parent if defined in the containingDirective?
What is really going on with my solution, and is it possible to find a cleaner solution?
From the docs: "The replacement process migrates all of the attributes / classes from the old element to the new one" so what was happening was this:
<containing-directive whatever-attribute=whatever></containing-directive>
was being replaced with
<table st-table="collection" st-pipe="scopeFun" whatever-attribute=whatever></table>
and somehow st-table did not enjoy the extra attributes (even with no attributes at all..).
By wrapping the containingDirective directive template within another div fixed the problem (I can now use replace:true):
<div><table st-table="collection" st-pipe="scopeFun"></table></div>
If someone has a more structured answer would be really appreciated
I have a custom directive:
.directive('test', function () {
return {
scope: {},
link: function (scope, element, attr) {
scope.$parent.$watch(attr.selectedItem, function(newValue, oldValue){
scope.selectedItem = newValue;
});
}
}
This will one way bind my directive's scope's selectedItem property to the value set in the attribute as such
<div test selectedItem="thePropertyOnTheController"></div>
But what if I want to two way bind? Is there an easy way to set this up without $watch'ing the directive's scope's selectedItem property and $parse'ing the attr.selectedItem expression and calling assign witht he parsed expression on scope.$parent?
$scope.thePropertyOnTheController might have some value like "Hello"
HTML
<div ng-repeat="photosets in userPhotoSetList">
<photosets photosetsarray="photosets.photosetDetail">
</div>
script :
.directive('photosets', function () {
return {
scope: {
photosetslist : "=photosetsarray"
},
link: function (scope, element, attr) {
console.log(scope.photosetslist);
//"Hello" is output
}
}
If you see photosetsarray="photosets.photosetDetail"" photosetsarray and
scope: {
photosetslist : "=photosetsarray" **//this name is same as assignee attr**
},
leftside variable name in html must = right side variable name in directive
Be careful with variable naming in these situations. Binding to an attribute that is declared as camel case in the directive cannot be accessed as such from the DOM.
.directive('test', function () {
return {
scope: {
item : "=selectedItem"
},
link: function (scope, element, attr) {
//do some stuff
}
}
So to correctly bind this attribute to a variable on the controller:
<div test selected-item="thePropertyOnTheController"></div>
I am trying to create a directive:
return {
restrict: 'A', // Attribute Directive
ngModel: '^ngModel',
scope: {
'ngModel': '='
},
link: function ($scope: ng.IScope, element, attrs, ctrl) {
var datePickerOptions = {
autoclose: true,
format: attrs.aceDatepickerFormat,
weekStart: attrs.aceDatepickerWeekstart
};
// Attach the datepicker events (must have Bootstrap.DatePicker referenced).
element.datepicker(datePickerOptions).next().on('click', function () {
$(this).prev().focus();
});
element.click(() => {
ctrl.$setViewValue(new Date());
});
}
};
In this example, when the click event occurs on the element, I wish to use ctrl.$setViewValue to the current date (this is a test).
When the link function is called, scope, element and atts are all populated correctly, however the ctrl is null.
The element is with a div with ng-controller set.
<div ng-controller="Controllers.FormElementsController">
<input class="form-control date-picker" id="id-date-picker-1" type="text"
ng-model="DatePickerValue"
ace-datepicker-weekstart="1"
ace-datepicker-format="dd-mm-yyyy"
ace-datepicker="" />
</div>
Why is no controller being passed here?
You have to use require to pull in the controller (ngModelController in your case):
return {
restrict: 'A', // Attribute Directive
require: '^ngModel',
You had it set to ngModel as the property name.
From the docs:
The myPane directive has a require option with value ^myTabs. When a
directive uses this option, $compile will throw an error unless the
specified controller is found. The ^ prefix means that this directive
searches for the controller on its parents (without the ^ prefix, the
directive would look for the controller on just its own element).
I have a directive named dir with:
ng-model="job.start_date"
comparison-date="job.end_date
Into scope.$watch("comparisonDate... I want to access my ng-model value. The problem is that scope is undefined into watch's callback function. The Question is: How can I get the ng-value inside this function?
.directive("dir", function() {
return {
scope: {
comparisonDate: "=",
ngModel: "="
},
link: function (scope, element, attrs, ctrl) {
var foo = scope.ngModel;
scope.$watch("comparisonDate", function(value, oldValue) {
console.log(value); //comparisonDate showing value properly
console.log(scope.ngModel); //Undefined
console.log(foo) //shows value but it's not refreshing. It shows allways the initial value
})
}
};
})
the view...
<input dir type="text" ng-model="job.start_date" comparison-date="job.end_date"/>
During the linking phase of the directive, the value may not be available. You can use $observe to observe the value change.
attrs.$observe("comparisonDate", function(a) {
console.log(scope.ngModel);
})
ng-model is built-in directive that tells Angular to do two-way data binding. http://docs.angularjs.org/api/ng.directive:ngModel
It looks like you are using the value of properties of the same object job to do comparison. If you want to stick with ng-model, you can use NgModelController: http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
Then change the view to:
<input dir type="text" ng-model="job"/>
and change the directive to:
.directive("dir", function() {
return {
require: '?ngModel', // get a hold of NgModelController
link: function (scope, element, attrs, ngModel) {
// access the job object
ngModel.$formatters.push(function(job){
console.log(job.start_date);
console.log(job.end_date);
});
}
};
})
Or you can change the attribute name from ng-model to some words haven't reserved. For example change the view like:
<input dir type="text" comparison-start-date="job.start_date" comparison-end-date="job.end_date"/>
Try scope.$watch(attrs.comparisonDate, ...) and then use attrs.ngModel