Angular directive automatically move attributes to inner template element with replace - javascript

When creating an angular directive with replace: true then the HTML in the DOM is going to be replaced with your template HTML. The attributes will then be put on the element that is going to replace your element.
e.g.
<input type="text" name="myName" my-directive>
will become something similar to
<div name="myName" my-directive>
<input type="text">
</div>
when my template of the myDirective directive looks like
<div>
<input type="text">
</div>
Now the question is how can I achieve that the name attribute is not set on the div but on the inner input element?
I could do it manually by be removing the attributes from the parent div element and add them to the input element. But I asked my-self whether there would be an automated way to do this with an option for angular directives.

Related

ng-html-bind for label that contains checkbox

I have the following view.It's standard bootstrap for checkboxes,where input is located inside the label
<div class="checkbox">
<label ng-bind-html="vm.trustedHtml">
<input type="checkbox" ng-model="vm.isAcknowledged">
</label>
</div>
I need to bind my trustedHtml property,that contains html,on label.But this directive fully replace the content of the label,including the input.How can I avoid it?The only option I see is changing the html and moving the input out of label,but I don't like it.
No, ng-bind-html does not have anything like "place to insert". It's really straightforward.
add nested <span> and put ng-bind-html on it
include <input> into vm.trustedHtml
Don't use ng-bind-html if you know all variations possible and there are not so many of them: just describe all options with appropriate ng-if

How to globally add a class to an input field on focus in angular

Say I have two components A-Component and B-Component.Both of these contains some form-fields.When a text field is focused I would like to add a css class to its parent. I know its possible to add a focus event for the text field or by using a directive.
<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">
But rather than using focus event or directive for every text fields, is there a possibility to write something globally for every component so that it effects all the input fields.
you can do this
<div class="parentDiv" ng-class="{'classOnFocus': focusClass}">
<input name="date" type="text" ng-focus="focusClass = true" ng-blur="focusClass = false">
</div>
Similar thing you can do on all fields
You can write css class in style.css file.style.css file applied global style for angular app

How to display tags in plain htm inside ng-app of angular js

I'me new to Angular JS. I wanted to know how to display the tags(or directive, expression etc.) written in my htm as such (present inside the ng-app).
e.g
<div ng-app="myExampleApp">
<input type="text" ng-model="firstname"/>
{{firstname}}
</div>
Now the textbox htm should be shown as such. (instead of a text box getting rendered). Please let me know how to escape them
One way is to use &lt and &gt and so on. But what about ng-model and how to prevent the expression from getting evaluated.
ng-non-bindable directive will do this!. :)
e.g.
<div ng-app="myExampleApp">
<input type="text" ng-model="firstname"/>
<label ng-non-bindable="">{{firstname}}</label>
</div>

How to pass directives to an element in the directives template in AngularJS?

I have a directive called step-field, in the template of the directive i have input or select elements that should sometimes have max-length or ng-required or some custom directive like validate-username.
The step field looks like this:
<step-field parent="Admin" field="Username"></step-field>
I want to add "validate-username" and "required=true" to this directive so it will look like this
<step-field parent="Admin" field="Username" validate-username required="true"></step-field>
And in the inside of the directive template i want the validate-username and required to be passed to the input field.
(btw $scope.isRequired = attrs.required)
<div class="field">
<label> {{fieldName}}:</label>
<input
name="{{inputName}}"
ng-model="wizard[modelName][fieldNameCamel]"
ng-required="{{isRequired}}"
type="{{inputType}}"/>
<div class="field--required" ng-if="isRequired===true"> * </div>
<div class="ng-messages__wrap"
ng-show="wizardForm[step][inputName].$dirty || wizardSubmittedOnce">
<div ng-messages="wizardForm[step][inputName].$error"
ng-messages-include="/templates/error-messages.html"></div>
</div>
</div>
How can i apply some of the directives i pass to step-field to the input field in the template?
Thanks!

angular ng-model transclude transfer

I am trying to create custom elements which will convert my form elements to match bootstrap's form styling structure
Basically,
<my-input ng-model="myname">
should become
<div class="form-element">
<input ng-model="myname" />
</div>
The problem is that when I use transclude, the ng-model goes to the root element and the resulting DOM is
<div class="form-element" ng-model="myname">
<input>
</div>
Is it possible to choose which inner element the ng-model attribute is transferred to??
If I create another directive called my-model and use it instead of ng-model, how can I transfer this to the inner input element?
<my-input my-model="myname">
should become
<div class="form-element">
<input ng-model="myname" />
</div>
I think it is unnecessary to use ng-transclude here, you can simply have directive
<my-input model="myname">
and directive template
<div class="form-element">
<input ng-model="model" />
</div>
where directives scope is
scope: {
'model': '='
}
By using this you can have couple of models in directive and you can put them wherever you want.
Yes. I ran into this issue a little while ago.
You need to bind your ng-model as a property of an object such as.
<div class="form-element">
<input ng-model="user.myname" />
</div>
And in controller, make sure you do this.
$scope.user = {};
In this way, angular would be able to find the ng-model.

Categories

Resources