I am trying to learn how to work with angular directives and so far with success. I have only one minor issue I cannot figure out.
In my directive I got a for attribute set on the same value of the id of an input field. But clicking on the label doesn't give the input control the focus like it should work normally.
I got this issue worked out in some example code:
<div ng-app='test' ng-controller='testCtrl'>
<label for="test1">Testlabel 1</label><br>
<input id="test1" type="text"></input><br>
<my-input id="test2"
label="Testlabel 2"
placeholder="enter somthing"
text="testVar"></my-input><br>
<span>{{testVar}}</span>
</div>
and the javascript:
angular.module('test', [])
.directive('myInput', function() {
return {
restrict: 'E',
template: '<label for={{id}}>{{label}}</label><br>' +
'<input id={{id}} type="text" ' +
' placeholder={{placeholder}} ng-model="text" />',
scope: {
id: "#",
label: "#",
placeholder: "#",
text: "="
}
}
})
.controller('testCtrl', ['$scope', function($scope) {
$scope.testVar = 'testing';
}]);
Same code in jsfiddle: http://jsfiddle.net/U92em/
What mistake am I making which causes my problem and how do I fix it?
Your "wrapper" has the same id too and it is not good. You can remove it in a link function, this way:
link: function(scope,el,attrs){
el.removeAttr("id");
}
Working: http://jsfiddle.net/cherniv/5u4Xp/
Or in compile function (thanks to Florent):
compile: function(el){
el.removeAttr("id")
}
Example: http://jsfiddle.net/cherniv/7GG6k/
Related
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
I created a simple directive wrapper around the HTML file input to make angular binding work. Here's my directive:
angular.module('myApp').directive('inputFile', InputFileDirective);
function InputFileDirective() {
var bindings = {
selectLabel: '#',
};
return {
restrict: 'E',
require: ['inputFile', 'ngModel'],
scope: true,
controllerAs: 'inputFileCtrl',
bindToController: bindings,
controller: function () {
},
template: `<input class="ng-hide" id="input-file-id" type="file" />
<label for="input-file-id" class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}</label>`,
link: link
};
function link(scope, element, attrs, controllers) {
if (angular.isDefined(attrs.multiple)) {
element.find('input').attr('multiple', 'multiple');
}
var inputFileCtrl = controllers[0];
var ngModelCtrl = controllers[1];
inputFileCtrl.getButtonLabel = function () {
if (ngModelCtrl.$viewValue == undefined || ngModelCtrl.$viewValue.length == 0) {
return inputFileCtrl.selectLabel;
}
else {
return ngModelCtrl.$viewValue.length + (ngModelCtrl.$viewValue.length == 1 ? " file" : " files") + " selected";
}
};
element.on('change', function (evt) {
ngModelCtrl.$setViewValue(element.find('input')[0].files);
ngModelCtrl.$render();
});
}
};
And here's the HTML
<body ng-app="myApp" ng-controller="MyController as ctrl">
<form name="ctrl.myForm">
<input-file select-label="Select Attachment" ng-model="ctrl.attachment1"></input-file>
<input-file select-label="Select Attachment" ng-model="ctrl.attachment2"></input-file>
</form>
</body>
It's pretty simple and it works - if only one is on the page. As soon as I add a second one, I notice that only the first one ever updates. If I select a file with the second one, the label updates on the first one. My suspicions are that the require ['inputFile'] is pulling in the controller for the first directive instance into the link function or something (which shouldn't happen). Even now as I type this, that doesn't really make sense to me. So what's going on here and how do I fix it?
Here's a codepen for you guys to play with and try to figure it out: http://codepen.io/astynax777/pen/PzzBRv
Your problem is not with your angular... is with you html.
You are assigning the same id twice.
Change your template to this:
template: `<label class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}<input class="ng-hide" type="file" /></label>`
I have small portion of codes with $watch but does not fire when a use input with autocomplete ( jQuery plugin). it only fires when manual typing input
app.directive("autoCode", ['elementData', function(elementData) {
var codes = elementData.map(function(ele){
return ele.Code;
});
return {
restrict: 'A',
scope:{
},
link: function(scope, element, attrs) {
$(element).autocomplete({source:[codes]});
}};
}]);
app.controller('transactionCtrl',['$scope','elementData', function($scope, elementData){
var names = elementData.map(function(ele) {
return ele.Name;
}),
codes = elementData.map(function(ele) {
return ele.Code;
});
$scope.$watch('code', function(codeValue){
console.log(codeValue);
});
}]);
below is html:
<form >
Code: <input type="text" name="code" auto-code ng-model="code">
Name: <input type="text" name="name" auto-name ng-model="name">
</form>
How to make it work with manual typing and autocomplete?
Try:
$scope.$watch($("input[name='code']").length, function(codeValue){
console.log(codeValue);
});
O something like that. You have to put the watch over a value that is changed for many times
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 am attempting to learn a little more about AngularJS' directives and have run into this situation. I would like to make a yes-no radio control that I can reuse. I have gotten most of the way - I think - but need a little push in the right direction.
I have this directive:
app
.directive('yesno', function () {
'use strict';
var config;
config = {
replace: true,
require: 'ngModel',
restrict: 'E',
scope: {
field: '=',
model: '='
},
templateUrl: 'views/yesno.html'
};
return config;
});
...and the template looks like this:
<fieldset class="yesno">
<input id="{{field}}-yes" name="{{field}}" ng-model="model" type="radio" value="yes" />
<label for="{{field}}-yes">Yes</label>
<input id="{{field}}-no" name="{{field}}" ng-model="model" type="radio" value="no" />
<label for="{{field}}-no">No</label>
</fieldset>
...and I am using it like this (simplified):
<form name="person">
<yesno field="'happy'" model="happy" />
</form>
Unfortunately what I am getting in the person object is a property {{field}} instead of happy like I would like. I keep telling myself that something like what I am attempting is possible and I just need to find it; but what.
Help please.
Update
Thank you, #HackedByChinese that helped a little but still not quite there. The problem is that I do want two way binding so that the value of the radios is populated into the parent scope; instead, when I inspect the person object it has a {{field}} property and not a happy property.
I am thinking that this is just something that AngularJS does not support in looking at:
AngularJS: Fields added dynamically are not registered on FormController
...and:
https://github.com/angular/angular.js/issues/1404
Well if you just want field to contain the string value that was entered, you can use the # prefix for the attribute to indicate it is a text binding (it will interpret the value of the attribute as literal text).
scope: {
field: '#',
model: '='
},
Click for demo.
On the other hand, if you need field to bind to the value an expression provided to the attribute (for example, you want to bind to a property on the parent scope), then you need to change the template HTML to evaluate field (simply {{field()}}) because they will be functions. The difference here is if people want to provide string values directly, they'll need to put it in quotes like your original example. I would also recommend a one-way binding, since it seems unlikely your directive would want to modify the parent scope value since it's just a name. Use the & prefix for that.
scope: {
field: '&',
model: '='
},
<fieldset class="yesno">
<input id="{{field()}}-yes" name="{{field()}}" ng-model="model" type="radio" value="yes" />
<label for="{{field()}}-yes">Yes</label>
<input id="{{field()}}-no" name="{{field()}}" ng-model="model" type="radio" value="no" />
<label for="{{field()}}-no">No</label>
</fieldset>
Click for second demo.
I ran into the same problem. The simplest solution is to inject the name value directly into the template string.
It works as long as you don't need the name value to be bound (ie. it doesn't need to change during the lifetime of the directive). Considering the way the name attribute is usually used, I think this constraint is not an problem.
app
.directive('yesno', function () {
return {
replace: true,
restrict: 'E',
scope: {
field: '#',
model: '='
},
template: function(element, attrs) {
return '<fieldset class="yesno"> \
<input id="{{field}}-yes" name="{{field}}" ng-model="model" type="radio" value="yes" /> \
<label for="{{field}}-yes">Yes</label> \
<input id="{{field}}-no" name="{{field}}" ng-model="model" type="radio" value="no" /> \
<label for="{{field}}-no">No</label> \
</fieldset>'.replace('{{field}}', attrs.field, 'g');
}
};
});
This solution is a bit messy, because of the inline html. If you want to load the template from a file as in the original question, you can do it like this:
app
.directive('yesno', ['$http', '$templateCache', '$compile',
function ($http, $templateCache, $compile) {
return {
restrict: 'E',
scope: {
field: '#',
model: '='
},
link: function(scope, element) {
$http.get('views/yesno.html', {cache:$templateCache})
.then(function(response) {
var content = angular.element(response.data.replace('{{field}}', scope.field, 'g'));
element.append(content);
$compile(content)(scope);
});
}
};
}]);