angular的mvc模式($scope)_angular的scope对应mvvm的

作者：煮酒与君饮 | 2024-07-24 11:29:03

踩

angular的scope对应mvvm的

例1

html

<div ng-controller="GreetCtrl">
Hello {{name}}!
</div>
<div ng-controller="ListCtrl">
<ol>
<li ng-repeat="name in names">
{{name}} from {{department}}
</li>
</ol>
</div>

function GreetCtrl($scope, $rootScope) {//rootScope根作用域
$scope.name = 'World';
$rootScope.department = 'Angular';
}

function ListCtrl($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}

例2

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Scope1.css" />
</head>
<body>
<div ng-controller="EventController">
Root scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="EventController">
<button ng-click="$emit('MyEvent')">
$emit('MyEvent')
</button>
<button ng-click="$broadcast('MyEvent')">
$broadcast('MyEvent')
</button>
<br>
Middle scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="item in [1, 2]" ng-controller="EventController">
Leaf scope
<tt>MyEvent</tt> count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="Scope2.js"></script>
</html>

function EventController($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function() {
$scope.count++;
});
}

AngularJS的MVC是借助$scope来实现的！！！

$scope是一个POJO

$scope提供了一些工具方法$watch()/$apply()

$scope是表达式的执行环境（作用域）

$scope是一个树形结构，与DOM标签平行

子$scope对象会继承父$scope上的属性和方法

每一个AngularJS应用只有一个根$scope对象，位于ng-app上

$scope可以传播事件，类似于DOM事件，可向上也可向下

$scope不仅是mvc的基础，也是实现双向数据绑定的基础

可用angular.element($0).scope()可获得当前元素上的scope来进行调试

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/874443