Angular JS scope and data binding

Scope

Scope ($scope) is associated with the applied data model, and the scope is also the context in which the expression executes. $scope objects are places that define the application of business logic, controller methods, and view properties. The scope is the glue between the view and the controller. Before the app renders and presents the view to the user, the template in the view is connected to the scope, and then the app sets the DOM to notify the Angularjs of the property change.

Based on dynamic binding, we update the $scope as soon as we modify the view data, and the view is rendered as soon as the $scope changes.

12345678910111213141516171819202122232425

<script type="text/javascript">functionloadController($scope) {            $scope.name = "博客园";            $scope.loadAgain = function() {                $scope.name = "我的博客";            };        };</script> <div ng-app>        <div ng-controller="loadController">            <input ng-model=‘name‘/>            <button ng-click="loadAgain()">                切换</button>                        &ltspan ng:bind="name"&gt <span ng:bind="name"></span>            <br />            &ltspan ng_bind="name"&gt <span ng_bind="name"></span>            <br />            &ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span>            <br />            &ltspan x-ng-bind="name"&gt <span x-ng-bind="name"></span>          </div></div>

　　

In the above code, we give a DIV element a Loadcontroller (Controller), then within the DIV element, that is, when the function is Loadcontroller, $scope the control range of this injected resource.

In this controlled range of HTML, you can access the $scope variable: $scope. Name, function $scope.loadagain.

Data binding and templates

As already mentioned, variables can be bound within the scope of the page through directives such as Ng-model, Ng-bind, and so on.

In fact, you can also use {{name}} to complete data binding.

Tell me about the template, there are three kinds of bindings for templates:

1. Write the HTML code directly in the page (just before the data binding)

2. Use the script tag to customize the template, as follows

12345678910111213141516171819202122232425262728

<script type="text/javascript">        functiontablelist($scope) {            $scope.userlist = [{ name: "张三", age: "23"}, { name: "李四", age: "25"}]        }; </script><script type="text/ng-template"id="tpl">                    <table ng-controller="tablelist">                        <tr>                            <th>                                姓名                            </th>                            <th>                                年龄                            </th>                        </tr>                        <tr ng-repeat="app in userlist">                            <td>                                {{app.name}}                            </td>                            <td>                                {{app.age}}                            </td>                        </tr>                     </table></script>   <div ng-include src="‘tpl‘"></div>

3. Referencing external files

Create a new Test.html template page and clear all the code, and paste the following code to save

123456789101112131415161718

<table ng-controller="tablelist">    <tr>        <th>            姓名        </th>        <th>            年龄        </th>    </tr>    <tr ng-repeat="app in userlist">        <td>            {{app.name}}        </td>        <td>            {{app.age}}        </td>    </tr></table>

Current page Direct reference test.html,<div ng-include src= "' test.html '" ></div>

The effect is the same:

The template reference is used in Ng-include, and the render instruction ng-repeat the object array to the page, Ng-repeat also provides several variables that you can use:

$index Current Index

Whether the $first is a header element

Whether the $middle is a non-head non-trailing element

Whether the $last is a trailing element

Angular JS scope and data binding