What will we learn?
- AngularJS , We will learn the directives / Part 2
Requirements:
- Notepad+
- Linux Operating System
- HTML
Difficulty Level:
- Easy Level
Let's Start the Course :
NG-BIND Directive
With the ng-bind directive, you can link any element in the DOM to any variable in scope. With this mechanics of data binding, changes to the variable will be instantly applied to the DOM element content.
Let's illustrate the simple usage:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title> AngularJs Directive Example </title>
<body>
<div ng-app="" ng-init="article='Hello Utopian'">
<b><span ng-bind="article"></span></b>
</div>
</body>
</html>
As you can see in the example, the 'ng-init' tag is bound to change the 'ng-bind' and 'span' elements contained in the variable. ıf you look at it, we could use {{expression}} in span element instead.
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title> AngularJs Directive Example </title>
<body>
<div ng-app="" ng-init="article='Hello Utopian / Testing'">
<b><span>{{article}}</span></b>
</div>
</body>
</html>
In this example we used the expression identifier as we always do the binding space. There is practically no difference between these two uses. Since the use of double-brackets is more readable, it is preferred by most developers.
The only difference between these two uses is that as of {{}}, the variable in {{}} appears as text on the page before page loading is complete. But we can hide it with the ng-cloak directive
NG-MODEL Directive
The ng-model provides double-way data binding between view and scope. If you remember, this directive allows you to instantly change the input, while in other words we used it
. Article Link
Related example:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> AngularJs First Application Example </title>
<body>
<div ng-app="">
<p> Your Name : <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Let's show an example where we use the values connected with multiple inputs and the ng-model directive in the same application.
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title > Angular Directive Example </title>
<body>
<div ng-app="">
<p > 1. Number : < input type="text" ng-model="number1"></p>
<p > 2. Number : < input type="text" ng-model="number2"></p>
<b> Total : </b> {{ number1 * number2}}
</div>
</body>
</html>
You can also use the Binding property and expression definition anywhere in the HTML, for example in the attribute descriptor of an HTML element. For example, let's use an expression reflection on the style attribute of a span element.
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script >
<title> Angular Directive Example </title >
<body><br>< div ng-app="">
<p> Size : < input type="text" ng-model="size"></p>
<span style="font-size:{{size}}px;">Font Size Test</div>
</div>
</body>
</html>
NG-MODEL-OPTIONS Directive
With this directive, you can edit how ng-model context will affect appearance. For example, you can enable the update to take effect after a few seconds without editing, but after the edit has been removed from the input.
Example Code
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> AngularJs Directive Example </title>
<body>
<div ng-app="">
Your Name: <input ng-model="name" ng-model-options="{ updateOn: 'blur' }"/>
<br>
{{name}}<br>
<b><span ng-bind="article"></span></b>
</div><br>
</body><br>
</html><br>
when you exit the input
In this example, we modified the conventional double-sided data binding mechanism to affect when the write operation from the user input completes with the 'updateOn-> blur' feature.
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<title > AngularJs Directive Example </title>
<body>
<div ng-app="">
Your Name: < input ng-model="name"<br>
ng-model-options="{ debounce: 1000 }"/>
<br>
{{name}}
<b><span ng-bind="article"></span></b>
</div>
</body>
</html>
In this example, we have delayed the expression update by 1 second (1000 milliseconds) with the debounce feature of the ng-model-options directive that receives an object notation string.
For the rest of the article, follow our series.
Series :
1 - Angularjs Basic Directive Descriptors / Series 1 #1
2 - Angularjs Basic Directive Descriptors / Series 2 #2
3 - Angularjs Basic Directive Descriptors / Series 3 #3
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it is a duplicate. It is very similar to a contribution that was already accepted here.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @sedatyildiz, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit