Angular控制器

最新推荐文章于 2022-07-09 21:59:04 发布

狼行千里d

最新推荐文章于 2022-07-09 21:59:04 发布

阅读量289

点赞数 2

文章标签： angularjs 前端框架模块化

本文链接：https://blog.csdn.net/wq656774/article/details/70824417

版权

控制器：Angular中用于进行数据逻辑处理和操作的一个模块
通过controller()函数进行注册

控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用

控制器：主要用来通过$scope挂载数据、挂载处理函数

$scope.$watch：监听变量；

//1. 监听单个变量

$scope.$watch("name", function() {

})
// 2. 监听多个变量
$scope.$watch("name + age", function() {

})
// 3. 监听对象的数据
$scope.$watch("users.username", function() {

})
// 4. 监听对象的所有属性
$scope.$watch("users", function() {

},true)
// 5. 监听数组数据~而不监听数组中的对象数据
$scope.$watchCollection("goodses", function() {

})
// 6. 监听数据发生变化的细节：修改前 VS 修改后
$scope.$watch("username", function(newValue, oldValue) {
console.log("数据被修改了", newValue, oldValue);
})
// 7. $watch可以重复，不会被覆盖，都会执行！
$scope.$watch("username", function(newValue, oldValue) {
console.log("data changed:", newValue, oldValue);
})

重绘数据

$scope.name = "tom";// 初始化数据
setTimeout(function() {// 延迟赋值
$scope.name = "jerry";
console.log("time out --> " + $scope.name);
$scope.$apply();// 重绘数据
}, 1000);

多个控制器

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="c1">
<div ng-bind="username"></div>
</div>
<hr>
<div ng-controller="c2">
<div ng-bind="username"></div>
</div>
<hr>
<div ng-controller="c3">
<div ng-bind="username"></div>
</div>
<script>
var app = angular.module("myApp", []);

为了方便多个控制器中的公共数据初始化
AngularJS提供了一个全局作用域对象$rootScope
AngularJS应用中，仅有一个全局作用域，其他所有的$scope作用域都是$rootScope的子元素
*/
/*
使用$rootScope，可以用于初始化全局变量和函数
但是存在一个问题: 因为控制器函数中可以直接使用$rootScope，就有可能会造成全局数据污染
规范：$rootScope一般和Angular模块的run()方法一起使用。来进行全局数据的初始化
*/
/* 专门用于初始化全局数据 */
app.run(function($rootScope) {
$rootScope.username = "angular";
});
</script>
</body>
</html>

狼行千里d

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular控制器

控制器：Angular中用于进行数据逻辑处理和操作的一个模块通过controller()函数进行注册控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用控制器：主要用来通过$scope挂载数据、挂载处理函数 var app = angular.module("m
复制链接

扫一扫