angular.js 学习 ng-app ng-model

最新推荐文章于 2024-09-14 18:52:56 发布

avtcpm1927

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量89

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/lifeisshort/articles/4948004.html

版权

angular.js 学习 ng-app ng-model

1.ng-app

使用ng-app声明Angular的边界

你可以用ng-app 指令告诉Angular 应该管理页面中的哪一块。如果你正在构建一款纯Angular 应用，那么你应该把ng-app 指令写在<html> 标签中，示例如下：

<html ng-app>
…
</html>

这样就会告诉Angular 去管理页面上的所有DOM 元素。

如果你有一款现存的应用，该应用正在用其他一些技术（如Java 或Rails）来管理DOM，那么你可以让Angular 只管理页面中的一部分，只要在页面中放入一些<div> 之类的元素即可。

<html>
…
<div ng-app>
…
</div>
…
</html>

2.ng-model 实现数据的双向绑定

上一章介绍了AngularJS框架的插值语法和ng-bind指令，本章介绍ng-model指令，本指令用于实现input和变量的双向绑定。

示例代码：

 
            <! 
            DOCTYPE 
            html> 
           
            < 
            html 
            ng-app> 
           
            < 
            head 
            > 
           
            < 
            meta 
            charset 
            = 
            "utf-8" 
            > 
           
            < 
            title 
            >ng-model directive</ 
            title 
            > 
           
            </ 
            head 
            > 
           
            < 
            body 
            ng-controller 
            = 
            "HelloController" 
            > 
           
            < 
            div 
            > 
           
            < 
            p 
            >双向绑定</ 
            p 
            > 
           
            < 
            input 
            ng-model 
            = 
            "greeting" 
            > 
           
            < 
            p 
            >Hello {{greeting || "World"}}</ 
            p 
            > 
           
            < 
            button 
            ng-click 
            = 
            "init()" 
            >重置</ 
            button 
            > 
           
            < 
            hr 
            > 
           
            </ 
            div 
            > 
           
            < 
            script 
            src 
            = 
            "../lib/angularjs/1.2.26/angular.min.js" 
            ></ 
            script 
            > 
           
            < 
            script 
            > 
           
            function HelloController($scope) { 
           
            $scope.init = function() { 
           
            $scope.greeting = "Hello"; 
           
            } 
           
            } 
           
            </ 
            script 
            > 
           
            </ 
            body 
            > 
           
            </ 
            html 
            >