Angular 数据绑定与控制器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/fanym18/article/details/102737753

本文介绍了Angular的基础知识，包括数据绑定的ng-app、ng-model、ng-bind的使用，以及ng-controller和控制器作用域的概念。详细讲解了Angular表达式与JavaScript表达式的区别，如Angular对undefined和null的宽容处理，以及过滤器的运用。同时，通过实例展示了如何解决未加载Angular.js时页面显示未渲染变量的问题以及多个控制器作用域的交互。

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

在这里插入图片描述
一、数据绑定
1、ng-app:使用angular控制哪一块就在哪一块的html中加入ng-app
例如：

<body ng-app>   //表示angular控制整个的body区域

    <!--angular的表达式--!>
  
    {{1+2}}       //在页面上输出3
    {{name}}      //在页面上输出name变量中的值
    {{"name"}}    //在页面上输出name字符串
  <script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>   //注意要引入angular.js文件，从angular官网下载
  <script>
    <!--js表达式--!>
    var string="alert(1+3)";
    eval(string); //eval(string) 函数可计算某个字符串，并执行其中的的 JavaScript 代码
  </script>
</body>

总结：angular表达式与js表达式的区别：
属性求值：js是对于window对象的，即是挂载到window对象上的，而angular所有的属性求值是对于scope的。
宽容：表达式求值对于undefined和null，angular是宽容的，但是js会报错。
没有流程控制语句：angular表达式中不能进行条件分支，循环，抛出异常。
过滤器：可以将表达式的结果传入过滤器链。

2、ng-model:数据的双向绑定（view层<=>model层）

<input type="text" ng-model="name" value="" />
  {{name}}
<input type="text" ng-model="name" value="" />

浏览器中的结果：
在这里插入图片描述
3、ng-controller:控制器

//index.js中文件代码：声明一个控制器
var firstController = function($scope){//注意形参必须是$scope
  $scope.name = "张三"；
  $scope.age= "20"；
}

//index.html中代码
<div ng-app>
  <div ng-controller="firstController">  //在控制器控制的html代码块内的变量由控制器的function定义的变量提供
    <input type="text" ng-model="name" value="" />  
    {{name}}
  </div>
</div>
<script type="text/javascript" src="app/index.js"></script> //引入控制器的声明文件
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

运行结果：
在这里插入图片描述
4、ng-bind:解决html加载时间导致页面显示未渲染的变量如{{name}}的问题

//index.html中代码
<div ng-app>
  <div ng-controller="firstController">  //在控制器控制的html代码块内的变量由控制器的function定义的变量提供
    <input type="text" ng-model="name" value="" />  
    <div ng-bind="name"></div>  //ng-bind绑定的是当前作用域中name的变量，当angular.js还未加载成功的过程中也不会显示未渲染的变量，而是空白的
  </div> 
</div>
<script type="text/javascript" src="app/index.js"></script> //引入控制器的声明文件
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

未使用ng-bind未加载angular.js时页面显示：
在这里插入图片描述
使用后未加载angular.js时页面的显示：

5、多个控制器的作用域问题

<div ng-controller="outer">   //外层控制器
  <input type="text" value="" ng-model="name">
  <div ng-controller="inner">  //内层控制器
    <input type="text" value="" ng-model="name">
  </div>
</div>

原则：angular的控制器的作用域与js的作用域相似
当内层控制器没有声明name时，两个input的值都为外层控制器的name变量值。在浏览器中改变value值（即改变view视图层的value值），不会对外层控制器中的name产生影响，一旦修改了内层input的value值，那么当改变外层input的值或者外层控制器内name的变量值都不会再对内层的name产生影响了。

angular的基础知识