Is there a syntax that will allow me to use ng-model to bind to a scope property with the same name as the element I am binding to?
So, in the following example:
<input name="myinputname" type="text" ng-model="?" />
is there something I can use as the ng-model value that will resolve to "myinputname", without requiring me to hard-code it?
If you could add the ng-model from the server side, it will have a better performance.
But in case you really want to do it in client-side, you could write a custom directive that will add the ng-model automatically at compile time like this:
app.directive('myModel', function($compile) {
return {
restrict: 'A',
replace: false,
priority: 1000,
terminal: true, // these terminal and a high priority will stop all other directive from being compiled at first run
link: function (scope, element, attrs) {
attrs.$set('ngModel', attrs.name); // set value of ng-model to be the same as the name attribute
attrs.$set('myModel', null); // remove itself to avoid a recusion
$compile(element)(scope); // begin compiling other directives
}
};
});
and use it like this:
<input type="text" name="myinputname" my-model />
after the first compilation it will automatically become:
<input type="text" name="myinputname" ng-model="myinputname" />
Plunker example: http://plnkr.co/edit/hBQQMDTr6cYtHzFvoAaQ?p=preview
Related
I just answered a question here
How i send value when i click button to server and popup directive
His code looked like this
<div ng-controller="IndexController">
<label id="number" >5</label>
<input type="button" ng-click="getUserDetails()" >
</div>
He was trying to access the value of the label element with id #number.
I understand that in Angular, DOM manipulation and querying should be done in a custom directive, and not inside a controller. I therefore gave this solution.
Since you want to access the value of a number, you are interacting with the DOM. The best solution for this is creating custom directives. Here is an example.
angular.module('myApp', [])
.directive('getValue', function({
restrict: 'A',
link: function(scope, elem, attrs) {
elem.bind("click", function() {
scope.value = elem.prev().text();
});
}
});
I know that in a directive's link function, you pass in scope, element and attrs as a param. In this line, I'm trying to set a scope variable to the label's value.
scope.value = elem.prev().text();
But I have a suspicion that I'm not doing it correctly. Since directives are the way to go, how can I do this.
I also checked this as a reference
Easiest way to pass an AngularJS scope variable from directive to controller?
I've read about the controller function inside directives, but I need the link function for getting the value from the DOM.
There's no need for a custom directive for that. ng-click can work:
$scope.getUserDetails = function(e){
$scope.value = e.target.previousElementSibling.innerHTML;
}
HTML
<div ng-controller="IndexController">
<label id="number" >5</label>
<input type="button" ng-click="getUserDetails($event)" >
</div>
$event
I am new to Angular. I have a directive and in the linkFunction I am able to set the scope to a certain value by using attributes["attribute-value"]. I was expecting element.html() to provide the inner html of the directive.
.directive("sfGroupbar", function () {
var linkFunction = function (scope, element, attributes) {
scope.text = element.html();
scope.attr = attributes["text"];
};
return {
restrict: 'E',
templateUrl: "controls/groupbar.html",
link: linkFunction,
scope: {}
};
In my view, I am using the directive like so...
<sf-groupbar warning="50" error="80" text="Web Server">Some Text</sf-groupbar>
In groupbar.html, I am using the code like so...
<div ng-controller="groupbarController">
{{text}} <br />
{{attr}}
</div>
I was expecting to see "Some Text" and "Web Server" as output. I am getting only Web Server as output, and instead of "Some Text", I am getting the following as output...
<div ng-controller="groupbarController">
{{text}} <br />
{{attr}}
</div>
You have to set transclude property of the directive to true and have to include ng-transclude attribute inside the template or templateurl 's HTML element to make innerHTML of the directive to render.
Here is the working plunker based on your code,
http://embed.plnkr.co/sXoLPxeFA21fxzzeAcVs/preview
Hope this helps!!!!
You need to include text and the other attributes in your scope definition like so
scope { text : '=' } and also you might wanna add transclude option to true to try and get the text inside your directive.
I'm sure you'll be interested to look at this part of the documentation
Directive to manipulate the DOM
I'm using a simple custom directive for a modified input field which occurs throughout my application:
app.directive('editor', function() {
return {
restrict: 'E',
templateUrl: 'editor.html',
scope: { value: '=' }
};
});
The editor.html basically creates an input element with additional controls. Simplified it looks like this:
<div>
<input ng-model="value">
<!-- more code here -->
</div>
I access my directive using <editor value="{{object.name}}"></editor>. This works perfect. Now I need to perform different validations on the input. The necessary validators to use vary, so I would like to be able to pass the actual validators to my directive. Something like:
<editor value="{{object.name}}" validator-a validator-b></editor>
or
<editor value="{{object.name}}" validators="validatorA,validatorB"></editor>
How could I achieve that?
You are creating a custom input control, so you might as well support ng-model - which is the right thing to do.
And, validators - built-in and custom - only require: "ngModel" for their function and they are independent (by design) from the underlying DOM implementation, so having ng-model automatically supports all ng-model-based validators.
Having ng-model support will also make your directive participate in form validation.
Since you are using an existing directive inside the template (i.e. <input>), you don't even need to bother with DOM, as you would've had you built something from scratch.
app.directive("editor", function(){
return {
require: "?ngModel",
scope: true,
template: "<input ng-model='value' ng-change='onChange()'>",
link: function(scope, element, attrs, ngModel){
if (!ngModel) return;
scope.onChange = function(){
ngModel.$setViewValue(scope.value);
};
ngModel.$render = function(){
scope.value = ngModel.$modelValue;
};
}
};
});
Then you can just apply validators directly:
<editor ng-model="foo" minlength="3"></editor>
http://plnkr.co/edit/k21Oem6kT8SXUefyhbI6?p=preview
I would like create an attribute directive which add an icon on a button when it's disabled.
Like this Fiddle
However, I would also add the ng-disabled directive on compile (with the same disabled-button value)
What is the best way ?
If I add the attribute ng-disabled on compile function, it never compile.
So, if I re-compile my element on link function, I have to remove ng-tranclude directive due to an error. More, my events, like ng-click, are triggered twice.
Bonus question: Is it possible to restrict my attribute directive to html elements like <a> or <button> ?
Thx
I'm afraid you cannot add directives dynamically to the element that contains your directive. The reason is that your compile function will be called after Angular has processed the directive's element and determined what the directives are attached to it. Adding another attribute at this point is too late, discovery has already taken place.
There may be ways to do it that I don't know of (and I would be interested in seeing any stable, non-hackish one).
I can suggest an alternative that may suit you: manually place ng-disabled on the button, but for brevity and consistency let the expression of ng-disabled drive your directive, i.e.:
<button ng-click="ctrl.click()" ng-disabled="ctrl.disabled" disabled-button>
Directive code:
.directive('disabledButton', function($parse) {
return {
restrict: 'A',
transclude: true,
scope: {
},
template: '<span ng-show="disabled">X</span><span ng-transclude></span>',
link: function (scope, elem, attrs) {
var disabled = $parse(attrs.ngDisabled);
scope.disabled = false;
scope.$watch(
function() {
return disabled(scope.$parent);
},
function(newval) {
scope.disabled = newval;
}
);
}
};
})
Fiddle: http://jsfiddle.net/3orwupo5/1/
Or you can manually set the disabled property of the button: http://jsfiddle.net/y5ezvj5L/
I'm trying do a small reusable component in AngularJS using directives.
I have made good progress but I have a problem with the validations. For example the required validation not working. I think is "binding" issue.
My HTML code: also in http://jsfiddle.net/pQwht/17/
<html ng-app="myApp">
<body>
<form ng-controller="Ctrl"
id="paymentCallForm"
action="#"
name="paymentCallForm">
<table>
<tr tdfield
labelname="Primary Account Number:"
fieldname="primaryAccountNumber"
title="Primary title"
>
</tr>
</table>
My directive script:
angular.module('myApp').directive('tdfield', function() {
return {
restrict: 'A',
replace:false,
transclude: false,
scope: { labelname: '#', fieldname: '#', title: '#'},
templateUrl:'element.html'
};
});
My element.html code:
<td id="lbl_paymentReference" class="formInputLabelWrapper">{{labelname}}</td>
<td class="formInputTextWrapper">
<input id="{{fieldname}}"
name="{{fieldname}}"
title="{{title}}"
class="large empty"
required>
<span data-ng-show="paymentCallForm.{{fieldname}}.$error.required"
class="error">Error</span></td>
Well, I solved this, but for what a price. There is a number of issues and angular related among them. I may not recall all, so here is the working example https://github.com/yaroslav-ulanovych/soq16245177.
When you define scope parameter like scope: { labelname: '#', fieldname: '#', title: '#'}, (with an object as a value), that creates an isolated scope, which means not inherited from parent one's. Therefore here ng-show="paymentCallForm.{{fieldname}}.$error.required" is no access to the form. As a workaround ng-show="$parent.paymentCallForm.{{fieldname}}.$error.required", but I didn't check whether your inputs are published in the form in case of the isolated scope. Or scope: true and inject attributes into the scope manually.
compile: function() {
return {
pre: function (scope, element, attr) {
scope.fieldname = attr.fieldname;
}
}
}
Note on using prelink function, so that it's called before children are linked.
Next ng-show will actually use not interpolated expression and there is obviously no property named {{fieldname}} in the form. That is fixed in later versions of Angular, don't know when exactly, cause I'm using master.
But what is not fixed is ngModelController. It gets it's name very early so publishes itself on the form under wrong one. I had to fix that myself, good that there is only one line to do that, in file src/ng/directive/input.js.
// add
modelCtrl.$name = attr.name;
// before this
formCtrl.$addControl(modelCtrl);
I believe you need a controller attached to your view. The form object will be attached to property with the id of the form on $scope object of this controller. Once you add that, I think it will start showing up.