Dynamic directives from within a resource property - javascript

I have a repeater for a resource that contains an attribute with angular directives inside, mixed with text. What I'm trying to accomplish is to show form inputs dynamically depending on the object's property.
<ul>
<li ng-repeat="action in actions">
{{action.form_layout}}
</li>
</ul>
In this case action.form_layout could contain some text with directives inside that would need to be compiled too.
Open the <door></door> with this <key></key>
// <door> and <key> are directives that would return different inputs
// so this should be compiled to Open the <input type="text" name="door"></input> with this <input type="text" name="key"></input>
How can I accomplish this? Right now the property value is being printed in the template as plain text.
Thanks

Please have a look at this fiddle. http://jsfiddle.net/dH5Ln/
Here the door and key are separated as individual directives. With the help of the compile function, we are parsing the template and displaying the compiled template.

Related

What is the difference between `ng-if` and `data-ng-if`

What is the difference between ng-if and data-ng-if ?
They both seem to work in the same way, however i am not able to figure out the difference in them as not much material is available on data-ng-if.
Technically both are same, but while validating your page W3C validator without defining data- on your custom attribute it will get failed, because W3C validator doesn't know anything about your custom attribute, so you must have to explicitly define data- before your custom attribute and then W3C validator will pass your HTML
They are equivalent. The $compile service links them to the same directive.
From the Docs:
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
For more informaton, see
AngularJS Developer Guide - Directive Normalization
arbitary attribute
HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as
<div id="thediv" data-ng-if="conditino"></div>
Both are actually one and the same.
Both are directives to specify Conditions.
You can use ng-if or prefixing ng-if with data- or x- like data-ng-if or x-ng-if.
Angular allows prefixing to its directives with data- or x- just for Validation due to "HTML5 validator".
Validation means you won't get any Warnings in Problems tab of Eclipse or any IDE that you are using like "Undefined attribute name (ng-model) at Eclipse".
You can use data-ng- instead of ng- if you want to make your page HTML valid nothing more than that.
The only difference between these two terms is that data-ng-app or x-ng-app validates the HTML while the ng-app didn't.
Functionality remains the same.

HTML Templating Engines and Liquid

I'm trying to get my head round templating engines and if there is something suitable for my requirements.
I'd like to specify HTML and provide dynamic functionality from within the HTML itself. For example, say I had a check box on a page
<label><input type="checkbox" id="cbox1" value="first_checkbox"> This is my checkbox</label>
I'd like to specify logic within HTML so that I display more content only if that checkbox has been checked, e.g.
// if #cbox1.checked == true
<h1>The check box is checked</h1>
// else
<h1>The check box is not checked</h1>
// end
Now, it is likely that liquid will be used to provide dynamic functionality based on a data store. So it'd also be nice to use the same liquid syntax to make the form dynamic (i.e. use liquid syntax in the if conditional above).
Is it possible to write a 'js engine', perhaps using jquery, that I could include in my web pages that would allow me to use liquid syntax but bind to variables in the 'js engine' as well as the data store to make my content dynamic?
Or, is there a better approach?
I would recommend using Vue.js (https://vuejs.org/).
The template engine is very easy to learn, and provides all the functionality you mention.
Here is a working example of your scenario:
https://jsbin.com/kikaxecogo/edit?html,output
But all you need to do is initialise Vue:
new Vue({
el: '#app',
data: {
showData: false
}
});
and write the template data:
<input type="checkbox" v-model="showData">
<div v-if="showData">
This is visible using v-if
</div>
<div v-else>
The check box is not checked
</div>
I've written a introduction guide to Vue.js here https://steveedson.co.uk/vuejs-intro/
You can also bind to other text inputs, data from ajax sources etc:
<input type="text" v-model="name">
<p>Hello {{ name }}</p>
And everything will update automatically.
As an alternative to Vue.js, there is also:
https://facebook.github.io/react/
https://angularjs.org/

Better way to use a variable in html

I wanted to have a template which would be used to create dynamic user detail forms. But I need to have different ids for all elements, so as to post the details correctly. My template looks like:-
<div id="user-template" class="hidden">
<div class='lbl-div' id='user(user_number)'>
<label>User(user_number)</label>
</div>
<label class="lbl" id="user(user_number)_firstname">Firstname:</label>
<input type="text" value="" />
<label class="lbl" id="user(user_number)_lastname">Lastname:</label>
<input type="text" value="" />
</div>
Here, user_number is a variable. onclick of a button would pick this template-->replace user_number with a global variable-->increment the global variable-->append the modified template as a child to the parent div.
I replace the variables as:-
template = template.replace(/\(user_number\)/g, count);
count++;
Here count is the global variable.
Is there a better way to achieve this(using the template dynamically with changing ids)?
If you are using html templates, then try using any templating engine, like underscore, mustache. But templating engine will not give you two way binding between template and your data. It just render template with given data.
If you want to use pure two way databinding application, then try using web application frameworks like angularjs or emberjs.

When should prefer angular directive over html native tag?

I'm a big fan of angularjs, I started lately to use it in all of my 'coding for fun' projects.
I have a big curiosity:
I have a two inputs, one disabled by a ng-disabled directive and the other disabled with an html tag (A better illustration in this link):
//...
<input type="text" disabled value="This is an html input text disabled" />
<input type="text" ng-disabled="true" value="disabled with angular js directive" />
//...
Using the browser ability I can right click on the input and remove the disabled and ng-disabled tags but only the one with the disabled tag would be editable, the other one will still be tracked by angular even when ng-disabled directives has been removed.
So, When and Why should I prefer using ng directives over native html tags? Which could be the impact of letting angular track all these actions? is it really worth to use it everywhere?
Use the native html 'disabled' if the element should always be disabled. (static, for example if you want to provide an input with text and never let the user change it)
Use angular if it should change based on variables value in the scope.
For example, say a button should change the state of an input.
<input type="button" ng-click="inpDisabled = true" >Disable Input</input>
<input type="text" ng-disabled="inpDisabled" />
live example
No harm will come if you still use ng-disabled="true" but it's redundant.
If you want to make directive static, you shoud use native html
<your-tag disable><your-tag>
against
<your-tag ng-disabled="true"><your-tag>
But AngularJS does not work this way, you shoud initialize your application and controller, then pass a variable as parameter to your directive:
JS:
$scope.isDisabled = true;
HTML:
<your-tag ng-disabled="isDisabled"><your-tag>
You shoud read more tutorials to make things clear

Angular directive inserts wrong DOM node

I have an app with many forms. Each field has several HTML elements, so I thought I could extract some directives (one per type of field) to keep my forms tidy.
I've created a sample app to demonstrate the problem, but I'm getting inconsistent behavior. In the sample app, a <link /> element replaces the <input />. In my real app, <input /> just gets removed from the DOM completely. I feel like this should be easy; why doesn't it work?
To answer your stated question, it's because you told it to, with ng-transclude. That replaces the contents of the tag with the original element, which I don't think you wanted; you probably wanted the original contents to be transcluded as the label instead.
This is probably what you're looking for:
<div class="form-group" >
<label for="{{htmlId}}" ng-transclude></label>
<input id="{{htmlId}}" class="form-control" type="text" ng-model="model" />
<span ng-repeat="error in errors">{{error}}</span>
</div>
I've moved the tranclusion into the label. While this works, I would also recommend the style of actually passing a label attribute, rather than transclude it, just for the sake of having a consistent API and simpler code; it's functionally equivalent, though, so don't let me bully you.
Also, you've got a few errors in your .js as well. First, you want to use = in your scope instead of &
scope: {
model: '=',
errors: '='
},
& is used to pass methods, while = is used for objects (this is a simplification). Since your model and errors are objects, you'll want to use = instead.
Finally, in your example, your html template and your directive's template don't have the same name... you've got an extra 's' in your .js, but that's probably just in the plunker and not your real app.

Categories

Resources