I recently started with AngularJS, and am currently working on a simple form with a tags input field and a submit button. The input field is supposed to accept multiple tags so that on clicking submit all the tags get saved as an array.
Now I am currently using ngTagsInput directive which I found on github(http://mbenford.github.io/ngTagsInput/). This directive gives me <tags-input></tags-input> HTML element which creates an input field that accepts multiple tags before submission. Here is what it look like(look at the Tags field):
This works fine, what I need now is a directive which gives me similar functionality but instead of an element ie. <tags-input>, I want an attribute which I can include inside the conventional <input> element like <input attribute='tags-input'> .
Question:
Is there a way I can use ngTagsInput as an attribute?
Are there any other directives out there which may suit my need? If yes then please post the link in the answer.
Thanks in advance.
No. As you can see on tags-input.js file, the directive is configured as an element:
return {
restrict: 'E',
require: 'ngModel',
scope: {
tags: '=ngModel',
text: '=?',
templateScope: '=?',
tagClass: '&',
onTagAdding: '&',
onTagAdded: '&',
onInvalidTag: '&',
onTagRemoving: '&',
onTagRemoved: '&',
onTagClicked: '&',
},
But you can write your own directive with attribute type and "replace" your div element to the tags-input element.
I wrote this example:
app.directive('tagsInputAttr',
function($compile){
return {
restrict: 'A',
require: '?ngModel',
scope:{
ngModel: '='
},
link: function($scope, element, attrs, controller) {
var attrsText = '';
$.each($(element)[0].attributes, function(idx, attr) {
if (attr.nodeName === "tags-input-attr" || attr.nodeName === "ng-model")
return;
attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";
});
var html ='<tags-input ng-model="ngModel" ' + attrsText + '></tags-input>';
e =$compile(html)($scope);
$(element).replaceWith(e);
}
};
}
);
Now you can configure your tags-input elements in two ways:
Element way:
<tags-input ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag here..." ></tags-input>
Attribute way:
<input tags-input-attr ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag here..." />
You can see this in action at Plunker:
https://plnkr.co/edit/yjkX22
Related
What i want to do is to be able to use a directive with different attributes in the same ng-app. The main goal is to run different code when the directive's input (ng-model) changes.
This is what i have now:
app.directive('customInput',
function ($compile) {
var customInputDefinitionObject = {
restrict: 'E',
replace: true,
scope: {
ident: '#'
},
template: '<input type="text" >',
controller: 'customInputController',
compile: function (tElement, tAttrs) {
$('input').removeAttr('ident')
.attr('ng-model', tAttrs.ident)
.attr('ng-change', tAttrs.ident + 'Change()');
var elemLinkFn = $compile(tElement);
return function (scope, element) {
elemLinkFn(scope, function (clone) {
element.replaceWith(clone);
})
}
}
}
return customInputDefinitionObject;
});
It works well in html e.g.:
<custom-input ident="var1"></custom-input>
<custom-input ident="var2"></custom-input>
i'm going to get to input with different ng-model and ng-change function, the controller uses dynamic names to get the $scope variables( $scope.var1Change).
The problem start when i want to use this directive inside another template.
app.directive('customInputGroup', function ($compile) {
var customInputGroupDefinitonObject = {
restrict: 'E',
replace: true,
scope: {
rident: '#',
},
template:''+
'<div>'+
'<custom-input id="first"></custom-input>'+
'<custom-input id="second"></custom-input>'+
'</div>',
controller: 'customInputGroupController',
compile: function (elem, attrs) {
$('#first', elem).removeAttr('id').attr('ident', attrs.rident + 'Start');
$('#second', elem).removeAttr('id').attr('ident', attrs.rident + 'End');
var rangeLinkFn = $compile(elem);
return function (scope, element) {
rangeLinkFn(scope, function (clone) {
element.replaceWith(clone);
})
}
}
}
return customInputGroupDefinitonObject;
});
In this case if i'm going to use it inside the HTML e.g.:
<custom-input-group rident='sg'></custom-input-group>
what i get rendered:
<div>
<input ng-model="sgEnd" ng-change="sgEndChange()">
<input ng-model="sgEnd" ng-change="sgEndChange()">
<input ng-model="sgEnd" ng-change="sgEndChange()">
</div>
For the 3rd rendered input the ng-change does not working.
If set terminal:ture in the inputGroup directive i get only to "input" rendered but both of them has the same ng-model and ng-change.
So how can i make it to render something like this:
<div>
<input ng-model="sgStart" ng-change="sgStartChange()">
<input ng-model="sgEnd" ng-change="sgEndChange()">
</div>
And if u know how would u be so nice to let me know only the "how" but the "why" aswell.
Thank you in advance.
I'm trying to bind 2 separate elements so that one can trigger the other. The first step in this, is adding an identifying variable to my component template.
Here's the bullet.html template:
<div class="button bullet" ng-model="component.bullet.show_on_click" ng-click="showElementByUniqueName( component.bullet.show_on_click )"><p>{{component.bullet.text}}</p></div>
I'd like to know what is the correct syntax to set ng-model as the VALUE in component.bullet.show_on_click. At the moment, in the final html, ng-model turns out just as shown in the template. I have tried single speech marks and single AND double curly braces; All throw errors.
Any help, much appreciated!
EDIT
On request, here is some more detail:
The eng-bullet attribute fires up the engBullet directive:
app.directive('engBullet', function() {
return {
restrict: 'A',
replace: true,
templateUrl: 'components/bullet.html',
link: function(scope, element, attrs) {
// following function referenced in bullet.html
scope.showElementByUniqueName = function (showOnClick) {
// remove 'replaces' element
$('#'+$('#'+showOnClick).attr('data-replaces')).addClass('hidden');
// hide all popups (in case another popup is currently visible)
$('.popup').addClass("hidden");
// show selected popup
$('#'+showOnClick).removeClass("hidden");
}
}
};
});
The eng-popup attribute fires up the engPopup directive:
app.directive('engPopup', function() {
return {
restrict: 'A',
replace: true,
templateUrl: 'components/popup.html',
link: function(scope, element, attrs) {
scope.show = true;
scope.complete = false;
// watch for this popup being made visible and check if
scope.$watch(function() { return element.is(':visible') }, function() {
scope.$parent.componentCompleted(attrs.id);
});
}
};
});
..which loads in the components/popup.html template:
<div class="hidden popup {{component.popup.type}}" id="{{component.popup.name}}" data-replaces="{{component.popup.replaces}}" eng-completable ng-show="component.popup.name">
<div ng-if="component.popup.type=='overlay'">
<div class="float-right button close-button">X</div>
</div>
<p class="heading">{{component.popup.heading}}</p>
<div class="popup-content">
<div ng-if="0" ng-repeat-start="(innerIndex, component) in component.popup.popup_components"></div>
<div ng-if="0" ng-repeat-start="(type, object) in component"></div>
<div ng-attr-id="{{'p' + pageId + '-s' + skey + '-c' + ckey + '-component-' + index + '-innerComponent-' + innerIndex}}" ng-switch="type">
<div ng-switch-when="image" eng-image></div>
<div ng-switch-when="paragraph" eng-paragraph></div>
</div>
<div ng-if="0" ng-repeat-end></div>
<div ng-if="0" ng-repeat-end></div>
</div>
</div>
I'm not sure this is really relevant to the question though, which is how do I get the VALUE in component.bullet.show_on_click to present in the final html as the value of ng-model in the bullet html template, eg:
ng-model="unique_name_here"
?
Thanks.
I'm trying to make a hinting ajax search box with an Angular directive. I'm still begining to match data and here is what I have:
function hintSearch () {
return {
restrict: 'E',
replace: true,
template: '<div class="search_hint"><label><input type="search" ng-change="query()"></label><ul class="results"><li class="hint" ng-repeat="hint in hints | limitTo: 8" ng-bind="hint" ng-click="hint_selected(hint)"></li></ul></div>',
scope: {},
link: function(scope, element, attrs){
scope.hints = ["client1", "client2"];
scope.hint_selected = function(){
console.log("hint selected");
}
scope.query = function(){
console.log("query php");
scope.hints = ["client1", "client2", "client3"];
}
}
}
}
The problem is that the ng-change gives me an error. With ng-click or ng-keypress it works perfectly so it makes no sense! Any ideas?
This is the error it throws:
angular.js:13550 Error: [$compile:ctreq] http://errors.angularjs.org/1.5.5/$compile/ctreq?p0=ngModel&p1=ngChange
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at gb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:71:251)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:66:67)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:322)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:65:473)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:65:473)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:58:305)
From error page:
This error occurs when HTML compiler tries to process a directive that
specifies the require option in a directive definition, but the
required directive controller is not present on the current DOM
element (or its ancestor element, if ^ was specified).
This is the source code of ng-change.
var ngChangeDirective = valueFn({
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
ctrl.$viewChangeListeners.push(function() {
scope.$eval(attr.ngChange);
});
}
});
ng-model is required for ng-change, there is no ng-model in your input.
<input type="search" ng-change="query()">
Add ng-model to your input, hope that will solve your problem.
<input type="search" ng-model='myModel' ng-change="query()">
This is part of a much more complicated directive that needs to have its own scope as well as require ngModel and replace the existing input. How can I have the directive add the ng-pattern attribute? As you can see in this jsfiddel the validation doesn't change based on the input if the ng-pattern is added in the template. This is because this will be added to an existing application that has a ton of different attributes already on a ton of different input elements, and I'm trying to make the addition as easy to implement as possible by just adding functionality to the existing input fields without messing up other things.
http://jsfiddle.net/MCq8V/
HTML
<div ng-app="demo" ng-init="" ng-controller="Demo">
<form name="myForm" ng-submit="onSubmit()">
<input lowercase type="text" ng-model="data" name="number">
Valid? {{myForm.number.$valid}}
<input type="submit" value="submit"/>
</form>
</div>
JS
var module = angular.module("demo", []);
module.directive('lowercase', function() {
return {
require: 'ngModel',
restrict: 'A',
scope:{},
replace: true,
link: function(scope, element, attr, ngModelCntrl) {
},
template: '<input class="something" ng-pattern="/^\d*$/">',
};
});
module.controller('Demo', Demo);
function Demo($scope) {
$scope.data = 'Some Value';
}
Thanks so much for any help! Ideally I would be able to just change something small and keep the ng-pattern, but I think I may have to do the validation setting on my own.
Here's how the pattern attribute is added to input item in a directive I have in my application. Note the use of compile at the end of the link function. In your case, rather than replace the element contents with a template, you'd just work with the existing element input tag.
link: function (scope, element, attrs, formController) {
// assigned template according to form field type
template = (scope.schema["enum"] !== undefined) &&
(scope.schema["enum"] !== null) ?
$templateCache.get("enumField.html") :
$templateCache.get("" + scope.schema.type + "Field.html");
element.html(template);
// update attributes - type, ng-required, ng-pattern, name
if (scope.schema.type === "number" || scope.schema.type === "integer") {
element.find("input").attr("type", "number");
}
element.find("input").attr("ng-required", scope.required);
if (scope.schema.pattern) {
element.find("input").attr("ng-pattern", "/" + scope.schema.pattern + "/");
}
element.find("input").attr("name", scope.field);
// compile template against current scope
return $compile(element.contents())(scope);
}
I tried quite a few things and it seemed that using a directive to replace an input with an input was tricking Angular up somewhere - so this is what I came up with:
http://jsfiddle.net/MCq8V/1/
HTML
<div ng-app="demo" ng-init="" ng-controller="Demo">
<form name="myForm" ng-submit="onSubmit()">
<div lowercase model="data"></div>
Valid? {{myForm.number.$valid}}
<input type="submit" value="submit"/>
</form>
</div>
JS
var module = angular.module("demo", []);
module.directive('lowercase', function() {
return {
restrict: 'A',
scope:{
data:'=model'
},
replace: true,
template: '<input class="something" ng-pattern="/^\\d*$/" name="number" ng-model="data" type="text">',
};
});
module.controller('Demo', Demo);
function Demo($scope) {
$scope.data = 'Some Value';
}
Also, you needed to escape your backslash in your regex with another backslash.
I have a directive that is instantiated like this:
<datepicker ng-model="foo"></datepicker>
Inside the directive, the datepicker tag is replaced by this template:
template: '<div class="datepicker-wrapper input-append">' +
'<input type="text" class="datepicker" />' +
'<span class="add-on"><i class="icon-calendar"></i></span>' +
'</div>'
The value that I want ng-model bound to is the value of the input field. What is the best way to go about this so I maintain the two-way data binding of ng-model?
Depending on how complicated your passthrough is, you can just use the = scope to do a bidirectional bind between a local name and ngModel, like in this fiddle:
http://jsfiddle.net/mThrT/22/
I had a hell of a time setting up the fiddle for some reason (first time trying with angular) but here's the money shot:
template: '<div class="datepicker-wrapper input-append">'
+ '<input type="text" class="datepicker" ng-model="bar" />'
+ '<span class="add-on"><i class="icon-calendar"></i></span>'
+ '</div>',
scope: {
bar: '=ngModel'
},
There are a few ways to do this..
There is a function on the ctrl parameter of the linking function called .$setViewValue(valueHere) that you can use to set the value of whatever ngModel is referencing as well. It will do the work of setting things $dirty etc. There is also a property called .$viewValue you can use to get the current value. So you can set up a $watch on an isolate scope property to update the ngModel values.
The more correct way to do this would still be in the linking function, but it would look like so:
app.directive('myDirective', function() {
restrict: 'E',
require: 'ngModel',
scope: {}, //isolate the scope
template: '<div class="datepicker-wrapper input-append">' +
'<input type="text" class="datepicker" ng-model="date" />' +
'<span class="add-on"><i class="icon-calendar"></i></span>' +
'</div>',
controller: function($scope) {
},
link: function(scope, elem, attr, ctrl) {
//get the value from ngModel
scope.date = ctrl.$viewValue;
//set the value of ngModel when the local date property changes
scope.$watch('date', function(value) {
if(ctrl.$viewValue != value) {
ctrl.$setViewValue(value);
}
});
}
});