argularjs双向数据绑定以及angularjs与mvc

本文链接：https://blog.youkuaiyun.com/qq_40975386/article/details/80171686

本文介绍了AngularJS框架中的数据绑定机制，包括双向数据绑定的实现原理及其核心指令ng-model和ng-bind的用法。此外，还详细讲解了控制器的概念及如何使用ng-controller指令实例化控制器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据绑定是angularjs框架在视图与作用域之间建立的数据同步机制。所谓双向是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。

ng-model指令

ng-model指令可以建立数据绑定，

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <title>model</title>
        <script src="e:/angular-1.5.9/angular.js">
        </script>
    </head>
    <body >
        <div>用户名：<input type="text" ng-model="uname"/></div>
        <div>{{uname}}</div>
    </body>
</html>

ng-app用于启动angularjs应用，这时会创建一个名为$rootSocpe的作用域，该作用域为angularjs应用的根作用域

把ng-model指令作为属性添加到input标签中，此时angularjs会在$rootSocpe作用域中添加一个uname属性和input输入框绑定，在input输入内容时，angularjs会自动把输入的内容同步到作用域的uname属性中

{{uname}}为angularjs的表达式形式，可以访问angularjs作用域里的属性。同时angularjs还能够监视作用域中数据的变化，当数据发生变化时，页面显示内容也能够得到实时更新

ng-bind指令

ng-bind指令是和数据绑定相关的另一个指令，作用是实现作用域到视图的单项数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据如上面的

<div>{{uname}}</div>

可以替换为<div ng-bind="uname"></div>

或者

在使用angularjs表达式的{{uname}}时如果遇到网络问题会导致angularjs加载缓慢，会看到游览器直接把angularjs表达式当作字符串渲染到页面中，用户体验不好，所以尽量使用ng-bind指令，他在angularjs没加载完毕的时候不会执行

angularjs中的mvc

angularjs中的mvc分别指模型，视图和控制器。其中angularjs内置的ng-controller指令可以对控制器对象实例化，作为标签的扩展属性使用

<div ng-controller="LoginController">

</div>

AngularJS框架遇到ng-controller指令时会根据ng-controller指令指定的控制器名称查找控制器构造方法，然后使用对应的构造方法实例化控制器对象，并将控制其依赖的对象注入控制器对象中。

在使用ng-controller指令实例化控制器时会产生一个新的作用域对象同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象。但需要注意的是，每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。下面我编写了一个例子

<!doctype html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>controller</title>
    <script src="e:/angular-1.5.9/angular.js"></script>
</head>
<body>
    <div ng-controller="UserController" style="border:#CCC solid lpx;">
        用户名：<input type="text" ng-model="name" placeholder="用户名"/>
        密码:<input type="password" ng-model="pword" placeholder="密码"/>
        <button>提交</button>
        <p>你输入的用户名:{{name}}</p>
        <p>你输入的密码:{{pword}}</p>
    </div>
    <br/>
    <div ng-controller="InfoContoller" style="border:#ccc solid lpx;">
        个人爱好:<input type="text" ng-model="love" placeholder="个人爱好"/>
        <p>你的个人爱好:{{love}}</p>
    </div>
    <script>
        function UserController($scope,$log){
            $scope.name="admin";
            $scope.pword="123456"
            $log.info("UserController->name:"+$scope.name);
            $log.info("UserController->pword:"+$scope.pword);
        }
        function InfoContoller($scope,$log){
            $scope.love="足球";
            $log.info("InfoContoller->name:"+$scope.name);
            $log.info("InfoContoller->pword:"+$scope.pword);
            $log.info("InfoContoller->love:"+$scope.love);
        }
        var app=angular.module("app",[])
        app.controller("UserController",UserController);
        app.controller("InfoContoller",InfoContoller);
    </script>
</body>
</body>
</html>

打开开发人员工具

本案例中，使用ng-controller指令实例化了两个控制器UserController和InfoContoller，AngularJS框架自动为每个控制器实例创建一个作用域对象，但是每个作用域对象只能与ng-controller所在的开始标签和结束标签之间DOM元素进行数据绑定，通过$log日至服务分别在usercontroller和infocontoller中输出$scope作用域对象的属性。由于用户名和密码输入框只能和usercontroller中的作用域对象进行数据绑定，因此在infocontoller控制器中输出作用域对象的name和pword

属性时输出对象为undefined

AngularJS应用中的DOM事件处理可以在控制器中完成，AngularJS框架为我们提供了一系列的事件绑定指令，这些指令是在原生的JavaScript事件名称前增加ng-前缀