I am trying to write a custom directive that will simply display a list of states. However I would like to build a directive which is as general as possible for lists that has objects that contain item_name and item_value. So for instance, i can use the same directive to populate cities, zipcodes, etc.
Here is what i have so far:
My template looks like this (not sure i need to iterate inside it)
{{defaultname}}
My directive looks like this:
app.directive('locselect', function () {
function link(scope, element, attrs) {
};
var select = {
replace:true,
link: link,
restrict: 'E',
templateUrl: 'app/search-filters/prp-select.html',
scope: {
defaultname: "defaulValue",
items:"="
}
}
return select;
});
And my implementation of the directive in the html looks like this:
<locselect items="states" default-value="State"></locselect>
Assume a scope of a controller that populates states or any other list inside the scope.
Here is a generic directive which prints a list of values:
app.directive('list', function () {
return {
scope : {
listItems : "="
},
template: '<ul><li ng-repeat="item in listItems">{{item.name}}, {{item.value}}</li></ul>',
link: function (scope, element, attrs) {
}
};
});
http://plnkr.co/edit/HHzDoYrqln0pawuL7MuU?p=preview
Edit
exmaple based on your plnkr:
http://plnkr.co/edit/SnpO2admMHmJV25lyi4p?p=preview
You may need to add ng-model also to your directive to bind the selected value to controller scope.
This might be what your are looking at:
app.directive('locselect', function () {
function link(scope, element, attrs) {
scope.ngModel = scope.defaultItem;
console.log(scope.items);
}
var select = {
restrict: 'E',
templateUrl: 'prp-select.html',
replace: true,
scope: {
items: "="
}
}
return select;
});
and your directive's template (app/search-filters/prp-select.html) should be
<select ng-options="item as item.full_name for item in items">
<option value="">Select State...</option>
</select>
and this is how you would want to use -
<locselect ng-model="modSelectedState" items="states"></locselect>
Check the plunkr here
Related
On my website, I want to standardize the way links to other persons look like, so I made a directive for it:
<my-person id="1"></my-person>
and
app.directive('myPerson', function() {
return {
restrict: 'E',
replace: 'true',
template: '{{person.name}}',
scope: {
person_id : '=id',
},
controller: function($scope, Repository) {
Repository.getPerson($scope.person_id).then(function(p) {
$scope.person = p;
});
},
};
});
This works well.
But in the next step, I want users to write news and in those news they want to refer to other persons. So basically, I want to display a text
'I met <my-person id="42"></my-person> yesterday.'
But when angularjs displays this context of my news entry, then the html tags are escaped of course and it is not compiled either.
Is there an easy way to achieve this? Here is a jsfiddle that shows my problem: jsfiddle link
You will need to compile your html inside the ng-repeat block.
For that make a directive like below
app.directive('bindHtmlCompile', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
}, function (value) {
element.html(value);
$compile(element.contents())(scope);
});
}
};
}]);
now inside your ng-repeat add your directive to the span like this:
<span class="row" bind-html-compile="newsEntry.text"></span>
working code here
Reference here
Say I have a directive like such:
<my-directive>This is my entry!</my-directive>
How can I bind the content of the element into my directive's scope?
myApp.directive('myDirective', function () {
return {
scope : {
entry : "" //what goes here to bind "This is my entry" to scope.entry?
},
restrict: "E",
template: "<textarea>{{entry}}</textarea>"
link: function (scope, elm, attr) {
}
};
});
I think there's much simpler solution to the ones already given. As far as I understand, you want to bind contents of an element to scope during initialization of directive.
Given this html:
<textarea bind-content ng-model="entry">This is my entry!</textarea>
Define bind-content as follows:
directive('bindContent', function() {
return {
require: 'ngModel',
link: function ($scope, $element, $attrs, ngModelCtrl) {
ngModelCtrl.$setViewValue($element.text());
}
}
})
Here's a demo.
I may have found a solution. It relies on the transclude function of directives. It works, but I need to better understand transclusion before being sure this is the right way.
myApp.directive('myDirective', function() {
return {
scope: {
},
restrict: 'E',
replace: false,
template: '<form>' +
'<textarea ng-model="entry"></textarea>' +
'<button ng-click="submit()">Submit</button>' +
'</form>',
transclude : true,
compile : function(element,attr,transclude){
return function (scope, iElement, iAttrs) {
transclude(scope, function(originalElement){
scope.entry = originalElement.text(); // this is where you have reference to the original element.
});
scope.submit = function(){
console.log('update entry');
}
}
}
};
});
You will want to add a template config to your directive.
myApp.directive('myDirective', function () {
return {
scope : {
entry : "=" //what goes here to bind "This is my entry" to scope.entry?
},
template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
restrict: "E",
link: function (scope, elm, attr) {
//You don't need to do anything here yet
}
};
});
myApp.controller('fooController', function($scope){
$scope.foo = "BLAH BLAH BLAH!";
});
And then use your directive like this:
<div ng-controller="fooController">
<!-- sets directive "entry" to "foo" from parent scope-->
<my-directive entry="foo"></my-directive>
</div>
And angular will turn that into:
<div>THIS IS MY ENTRY</div>
Assuming that you have angular setup correctly and are including this JS file onto your page.
EDIT
It sounds like you want to do something like the following:
<my-directive="foo"></my-directive>
This isn't possible with ELEMENT directives. It is, however, with attribute directives. Check the following.
myApp.directive('myDirective', function () {
return {
template: "<div>{{ entry }}</div>", //**YOU DIDN'T HAVE A TEMPLATE**
restrict: "A",
scope : {
entry : "=myDirective" //what goes here to bind "This is my entry" to scope.entry?
},
link: function (scope, elm, attr) {
//You don't need to do anything here yet
}
};
});
Then use it like this:
<div my-directive="foo"></div>
This will alias the value passed to my-directive onto a scope variable called entry. Unfortunately, there is no way to do this with an element-restricted directive. What is preventing it from happening isn't Angular, it is the html5 guidelines that make what you are wanting to do impossible. You will have to use an attribute directive instead of an element directive.
I'm new to angular. I want to write a directive which has all the attributes that I added to it when using in html. For example:
This is my directive
'use strict';
app.directive('province', function($compile) {
return {
restrict: 'E',
link: function (scope, element, attrs, controller) {
var markup = "<select></select>";
var elem = angular.element(element);
elem.replaceWith($compile(markup)(scope));
}
};
})
HTML:
<province class="form-control" data-target"elemntId"></province>
I want my <select> contain the class and other attributes that I added to directive in html.
output that I want: <select class="form-control" data-target="elementId"></select>
I used angular.element(element).attr(attr);, but it does not worked;
Any help is appreciated in advance.
Edit
I want all the attributes that exist in attrs of link function to be added to markup.
I would iterate over directive's attr array and apply it to your template:
app.directive('province', function($compile) {
return {
restrict: 'E',
replace:true,
template: "<select></select>",
link: function (scope, element, attrs) {
var attr;
for (attr in attrs.$attr) {
if(attrs.hasOwnProperty(attr)){
element.attr(attr, attrs[attr]);
}
}
}
};
})
Directive Tag:
<province foo="bar" foo1="bar1"></province>
Compiled into:
<select foo="bar" foo1="bar1"></select>
Plunkr
Depending on your needs, you don't need to compile yourself. You can use template and replace instead.
app.directive('province', function() {
return {
restrict: 'E',
template: '<select></select>',
replace: true,
link: function (scope, element, attrs) {
}
};
});
See plnkr
You can make use of the attrs parameter of the linking function - this will get you the values of the attributes:
attrs.class and attrs.dataTarget are the ones you need.
You can take a look at the documentation here that elaborates further uses of the linking function
I’ve create a custom directive that contains a select input field.
I’m using ng-options to populate the select options and I'm currently passing in the data for the options using an options attribute bound to an isolate scope. See below.
<script>
recManagerApp.directive(myDirective, function () {
return {
restrict: 'E',
templateUrl: '/templates/directives/mydirective.html',
scope: {
mySelectedValue: "=",
options : "="
}
};
});
</script>
<my-directive my-selected-value="usersValue" options="myDataService.availbleOptions"></my-directive>
<div>
<select data-ng-model="mySelectedValue" data-ng-options="item for item in options">
<option value="">Select something</option>
</select>
</div>
The above works as expected, correctly populates the options, selects the correct value and has two-way binding to the property in the parent scope.
However, I’d rather not pass in the options using an attribute on the my-directive element and instead inject in a service (myDataService) that can provide the data for the ng-options. However, when I try this (various ways) no options are created, despite the service being injected correctly and the data being available. Can anyone suggest a way to do this?
recManagerApp.directive(myDirective, function (myDataService) {
return {
restrict: 'E',
templateUrl: '/templates/directives/mydirective.html',
scope: {
mySelectedValue: "=",
options : myDataService.availableOptions
}
};
});
Thanks
Mat
In my opinion, you have several options (as pointed out in the comments):
1. create controller for the directive
In you directive's template, use a controller, i.e.
<div ng-controller="SelectController">
<!-- your select with the ngOptions -->
</div>
and create the SelectController as a regular controller:
var app = angular.module("app.controllers", [])
app.controller("SelectController", ['$scope', 'myDataService', function(scope, service) {
scope.options = service.whatEverYourServiceDoesToProvideThis()
}]);
You can also give your directive a controller, which works just the same:
recManagerApp.directive(myDirective, function () {
return {
restrict: 'E',
templateUrl: '/templates/directives/mydirective.html',
scope: {
mySelectedValue: "=",
},
controller: ['$scope', 'myDataService', function(scope, service) {
scope.options = service.whatEverYourServiceDoesToProvideThis()
}]
};
});
2. injecting it into the directive and using it within link
recManagerApp.directive(myDirective, function (myDataService) {
return {
restrict: 'E',
templateUrl: '/templates/directives/mydirective.html',
scope: {
mySelectedValue: "="
},
link: function(scope) {
scope.options = myDataService.whatEverYourServiceDoesToProvideThis()
}
};
});
I created a very simple directive which displays a key/value pair. I would like to be able to automatically hide the element if the transcluded content is empty (either zero length or just whitespace).
I cannot figure out how to access the content that gets transcluded from within a directive.
app.directive('pair', function($compile) {
return {
replace: true,
restrict: 'E',
scope: {
label: '#'
},
transclude: true,
template: "<div><span>{{label}}</span><span ng-transclude></span></div>"
}
});
For example, I would like the following element to be displayed.
<pair label="My Label">Hi there</pair>
But the next two elements should be hidden because they don't contain any text content.
<pair label="My Label"></pair>
<pair label="My Label"><i></i></pair>
I am new to Angular so there may be a great way handle this sort of thing out of the box. Any help is appreciated.
Here's an approach using ng-show on the template and within compile transcludeFn checking if transcluded html has text length.
If no text length ng-show is set to hide
app.directive('pair', function($timeout) {
return {
replace: true,
restrict: 'E',
scope: {
label: '#'
},
transclude: true,
template: "<div ng-show='1'><span>{{label}} </span><span ng-transclude></span></div>",
compile: function(elem, attrs, transcludeFn) {
transcludeFn(elem, function(clone) {
/* clone is element containing html that will be transcludded*/
var show=clone.text().length?'1':'0'
attrs.ngShow=show;
});
}
}
});
Plunker demo
Maybe a bit late but you can also consider using the CSS Pseudo class :empty.
So, this will work (IE9+)
.trancluded-item:empty {
display: none;
}
The element will still be registered in the dom but will be empty and invisible.
The previously provided answers were helpful but didn't solve my situation perfectly, so I came up with a different solution by creating a separate directive.
Create an attribute-based directive (i.e. restrict: 'A') that simply checks to see if there is any text on all the element's child nodes.
function hideEmpty() {
return {
restrict: 'A',
link: function (scope, element, attr) {
let hasText = false;
// Only checks 1 level deep; can be optimized
element.children().forEach((child) => {
hasText = hasText || !!child.text().trim().length;
});
if (!hasText) {
element.attr('style', 'display: none;');
}
}
};
}
angular
.module('directives.hideEmpty', [])
.directive('hideEmpty', hideEmpty);
If you only want to check the main element:
link: function (scope, element, attr) {
if (!element.text().trim().length) {
element.attr('style', 'display: none;');
}
}
To solve my problem, all I needed was to check if there were any child nodes:
link: function (scope, element, attr) {
if (!element.children().length) {
element.attr('style', 'display: none;');
}
}
YMMV
If you don't want to use ng-show every time, you can create a directive to do it automatically:
.directive('hideEmpty', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: {
post: function (scope, elem, attrs) {
$timeout(function() {
if (!elem.html().trim().length) {
elem.hide();
}
});
}
}
};
}]);
Then you can apply it on any element. In your case it would be:
<span hide-empty>{{label}}</span>
I am not terribly familiar with transclude so not sure if it helps or not.
but one way to check for empty contents inside the directive code is to use iElement.text() or iElement.context object and then hide it.
I did it like this, using controllerAs.
/* inside directive */
controllerAs: "my",
controller: function ($scope, $element, $attrs, $transclude) {
//whatever controller does
},
compile: function(elem, attrs, transcludeFn) {
var self = this;
transcludeFn(elem, function(clone) {
/* clone is element containing html that will be transcluded*/
var showTransclude = clone.text().trim().length ? true : false;
/* I set a property on my controller's prototype indicating whether or not to show the div that is ng-transclude in my template */
self.controller.prototype.showTransclude = showTransclude;
});
}
/* inside template */
<div ng-if="my.showTransclude" ng-transclude class="tilegroup-header-trans"></div>