控制器->模板->控制器->模板

数据到模板的绑定，主要是使用模板标记直接完成的。模板到数据的绑定，主要是通过 ng-model 来完成的。

使用 {{ }}这个标记，就可以直接引用，并绑定一个作用域内的变量。在实现上， ng 自动创建了一个 watcher 。效果就是，不管因为什么，如果作用域的变量发生了改变，我们随时可以让相应的页面表现也随之改变。我们可以看一个更纯粹的例子：

index.html

<head>
    <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
    <script type="text/javascript" src="app/index.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
            <input type="text" value="" ng-model="age"/>
            {{name}}
            {{age}}
        </div>
    </div>
</body>

app/index.js

var app = angular.module('myApp', []);

app.controller('firstController', function($scope){

    // $scope 我们叫做作用域
    // 申明一个Model
    $scope.name = '张三';

    $scope.age = 20;

});

注意上述代码：

 {{name}}
 {{age}}

如果当网络慢时，页面还未渲染，页面将会直接显示上述内容。所以需要使用ng-bind指令。上述内容替换为

<div ng-bind="name"></div>
<div ng-bind="age"></div>

Previous数据绑定 Next多个控制器

Last updated 5 years ago

Was this helpful?

控制器->模板->控制器->模板

数据到模板的绑定，主要是使用模板标记直接完成的。模板到数据的绑定，主要是通过 ng-model 来完成的。

index.html

<head>
    <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
    <script type="text/javascript" src="app/index.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
            <input type="text" value="" ng-model="age"/>
            {{name}}
            {{age}}
        </div>
    </div>
</body>

app/index.js

var app = angular.module('myApp', []);

app.controller('firstController', function($scope){

    // $scope 我们叫做作用域
    // 申明一个Model
    $scope.name = '张三';

    $scope.age = 20;

});

注意上述代码：

 {{name}}
 {{age}}

如果当网络慢时，页面还未渲染，页面将会直接显示上述内容。所以需要使用ng-bind指令。上述内容替换为

<div ng-bind="name"></div>
<div ng-bind="age"></div>

Previous数据绑定 Next多个控制器

Last updated 5 years ago

Was this helpful?