作用域特点
简介
$scope对象,实质是一个作用域对象。作用域可以存储数据模型、为表达式 表达式提供上下文环境和监听表达式的变化并且传播事件。主要是用来连接视图与控制器。
作用域特点
- $watch
监听数据模型的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>推断注入</title> <script src="components/angular/angular.min.js"></script> </head> <body ng-app="a3_6"> <div ng-controller="c3_6"> <div> <input type="text" ng-model="name" placeholder="请输入姓名"> </div> <div> {{count}} </div> <div> {{name}} </div> </div> <script> var a3_6 = angular.module('a3_6',[]) .controller('c3_6',['$scope',function($scope){ $scope.count = 0; $scope.name = ''; $scope.$watch('name',function(){ console.log($scope.name); $scope.count++; }); }]) </script> </body> </html>
- $apply
为各种类型的数据模型提供支撑,将他们引入到ng可控制器的范围中。例如,通过页面时图模版中,‘ng-click’指令,执行控制器中的代码。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script src="serviceJS01.js"></script> </head> <body ng-app="myApp"> <div ng-controller="firstController" ng-click="show()"> {{name}} {{age}} </div> </body> </html> <script> var app = angular.module("myApp", []); app.controller('firstController', function ($scope, $timeout) { setTimeout(function () { $scope.$apply(function () { $scope.name = "李四"; }) }, 2000); $scope.name = "张三"; $scope.age = '10'; $scope.show = function () { $scope.name = '点击后的name'; } $timeout(function () { $scope.age = '50'; }, 2000); }) </script>
记住最重要的就是AngularJS是否能够监测到你的更改。如果不能,那么,你就得必须人为调用
$apply()
如果AngularJS总是将我们的代码放在
$apply()
中并且执行$digest
循环,那么,什么时候需要我们人为的调用$apply
呢?事实上,AngularJS已经很明确的告诉我们了。AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如,改变数据的代码在$apply()
里面)。AngularJS内建的指令也会自动触发$digest
循环所以任何数据模型(model)的改变都会反映到视图中。但是,如果我们更改一个不在AngularJS执行上下文中的数据模型(model),就需要人为的调用$apply()
来提醒AngularJS数据发生变化了。就像是要告诉AngularJS,我们改变了一些数据,他应该启用监听器以便于让我们所做的改变能够反映出来。setTimeout,是一个回调,setTimeout是在angularjs中的,不过setTimeout里面的函数是回调就跳出了angularjs上下文。
很多时候不在上下文就是因为回调函数!