Example of using NG-BIND directive to implement one-way binding in ANGULARJS-PHP开发-php.cn

Example of using NG-BIND directive to implement one-way binding in ANGULARJS

高洛峰

Release： 2016-12-24 09:54:27

Original

1207 people have browsed it

After briefly introducing the AngularJS framework, this article uses an example to demonstrate the use of {{}} interpolation method and ng-bind directive.

Unlike jquery, which is just a class library that strengthens and simplifies front-end development, angularjs is a complete web front-end framework, so the learning curve is much higher.

angularjs feels to me similar to Java's Spring framework. It is in the central container position and glues other components. Many of its built-in components can already meet general scenarios. In special scenarios, we can expand according to the framework ideas.

Let’s start with the most basic content:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>直接输出字符串字面值</p>
    Hello {{"World"}}
    <hr>
</div>
<div>
    <p>使用占位符输出变量</p>
    Hello {{greeting}}
    <hr>
</div>
<div>
    <p>使用ng-bind指令输出变量</p>
    Hello <span ng-bind="greeting"></span>
    <hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.greeting = "World";
    }
</script>
</body>
</html>

Copy after login

ng-app declares an angularjs module and is limited to the scope of declaring html tags.

ng-controller declares an angularjs controller in the module. There can be multiple controllers, but the context is isolated, and the scope of the controller should be narrowed as much as possible.

{{}} is the interpolation syntax of angularjs, similar to JSP's EL expression ${}. The first output is because "World" is a literal value, and the program will output it directly; the second output is because greeting is a variable defined in the controller, so the value corresponding to the variable will also be output, which is also World; the third output The built-in ng-bind attribute directive of angularjs is used. The final result is equivalent to {{}}, but note that the directive = is followed by a string, so do not make a mistake.

The HelloController in js corresponds to the instructions on the body. The input parameter $scope is a service provided by the framework, which represents the context of the current controller. There are other similar services that the framework will automatically inject. You will learn about it later. The method body has only one line and defines a variable on $scope, which is the variable referenced in the html code.

This article is very simple, just copy the code and it will run. Note that angular.min.js is the latest version of the 1.2 branch. The same code cannot be run with version 1.3.0. The reason is unknown. It may be related to 1.3.0 not being the final Release version.

For more examples of using the NG-BIND instruction to implement one-way binding in ANGULARJS, please pay attention to the PHP Chinese website for related articles!