angularjs(表达式&控制器)

最新推荐文章于 2023-07-17 14:37:45 发布

世间百态不过尔尔

最新推荐文章于 2023-07-17 14:37:45 发布

阅读量256

点赞数

分类专栏： angularjs 文章标签： angularjs(表达式&控制器)

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88585546

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、表达式
表达式写在双大括号内：{{表达式}}
表达式能够将数据绑定到HTML中，类似于ng-bind
将表达式写在需要显示数据的地方
表达式可以包含字符串、运算符、变量等

1、表达式的类型
1）数值
{{表达式}}，表达式有数值组成或是单个数值
2）字符串类型
{{表达式}} 表达式是一个字符串或者是一个字符串类型的变量

3）对象类型

二、控制器
Angular的应用程序被控制器控制，控制器是以个js对象，由标准的js对象构造函数创建，使用ng-controller指令来定义一个控制器，控制包含一个$scope对象，该对象包含控制器中的所有的变量;

$scope是把view连接到controller上的对象，在mvc架构中，$scope被认识是M，它提供一个绑定到dom上的上下文，￥scope实际上是一个js对象，controller和view都可以访问它，$scope中,主要存储数据和函数

1、Angular是如何实现双向数据绑定的
-脏检查（脏检测）
将原来的对象(数据)复制一份（产生一个副本），在某个时间，比较现对象与副本的值，如果不一致说明发生了变化，这种方式要求保留两份变量，而且也会遍历对象，比较每个属性，会对程序的性能造成一定的影响；

-Angularjs的脏检测
不会检测所有的对象，当对象被绑定在html中，这个对象会被添加为脏检查的对象；
不会检测所有的属性，当属性被绑定后，参会去检测
在Angular程序初始化时，会将绑定的对象和属性添加为监听对象，也就说一个对象绑定N个属性，就会添加N个监听对象

-什么时候去脏检查
Angularjs的系统方法都会触发比较事件，比如，controller的初始化，比如以ng开头的事件发生后，都会执行脏检查

-手动触发脏检查
有时，被绑定的对象发生了改变时，并不会触发脏检查，此时需要我们手动触发
使用$apply()方法可以触发脏检查

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="myVC">
    <div>2+3</div>
    <div>{{2+3}}</div>
    <div ng-init="a=10;b=5">{{a+b}}</div>
    <div ng-init="str = 'abc123'">
        {{"字符串"}}
        {{str}}
    </div>

    <div ng-init ="stu={name:'张三',age:10}">
        {{stu.name}}
    </div>

    <div ng-init="arr=[1,2,3,4]">
        {{arr[0]}}
    </div>
    <div ng-bind="name"></div>
    <div>{{name}}</div>
    <input type="text" ng-model="name">
    <div ng-bind="time"></div>
    <script>
        // 首先获取app;module表示创建模块，第一个参数是我们ng-app属性的值，第二个参数是一个数组，表示当前模块所依赖的外部模块
        var app = angular.module("app",[]);
        //创建controller
        app.controller("myVC",function($scope){
            $scope.name = "张三";
            $scope.time = new Date();
            // setInterval(function(){
            //     $scope.time = new Date();//此时绑定的变量发生了改变，但是不会触发脏检查
            //     console.log($scope.time);
            // },1000)
            setInterval(function(){
                // 使用$apply触发脏检查
                $scope.$apply(function(){
                    $scope.time = new Date();
                });
            },1000)
        });
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs(表达式&控制器)

一、表达式表达式写在双大括号内：{{表达式}}表达式能够将数据绑定到HTML中，类似于ng-bind将表达式写在需要显示数据的地方表达式可以包含字符串、运算符、变量等1、表达式的类型1）数值{{表达式}}，表达式有数值组成或是单个数值2）字符串类型{{表达式}} 表达式是一个字符串或者是一个字符串类型的变量3）对象类型二、控制器Angular的应用程序被控制器控制，控制...
复制链接

扫一扫