The type of angularjs ng-bind directive

Saturday, February 6th, 2016 (0 Comment)

We have used a lot angularjs ng-bind driective in the previous post. But this article, we will learn more about angularjs ng-bind directive and expand the types of ng-bind as ng-bind-html and ng-bind-template.

1. What is angularjs ng-bind directive?

ng-bind will be compiled at the zero level, meaning the first level of the application. When HTML tags using ng-bind, angularjs will find and replace content within the HTML tag.

The fact that we should not use ng-bind mechanism directly, instead use {{key}}. It is better to use ng-bind in our case combined with ng-model and ng-model-options (you can review the previous post).

Example 1: display text input using ng-bind and not using ng-bind

Demo

  • Line 15: show text input using ng-bind
  • Line 16: show text without using ng-bind

2. What is angularjs ng-bind-html directive?

This directive will display HTML content, not displayed full text content.

ng-bind-html Directive must declare the library sanitize in the list of objects that use angular.module function (angular.module (‘lvapp’, [‘ngSanitize’])).

Example 2: input html <a> and show link of <a> tag

Demo

  • Line 7:  add link to use library sanitize
  • Line 15: use ng-bind-html to parse code html input to html content

Output:

3. What is angularjs ng-bind-template directive?

ng-bind-template Directive will determine the content should replace through the angular expression syntax {{name}}, unlike ng-bind, ng-bind-template can contain many expressions, eg ng-bind-template ={{name2}}{{name1}} “. ng-bind-template was essential for the contents inside the tag that it does not contain HTML tags such as tags (title, options, meta).

Example 3: display last name and full name when input data

Demo

  • Line 16: use ng-bind-template include two expression is {{fname}} and {{lname}}

Output:

 

Tags: , , , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *