您的位置：首页 > Web前端 > JavaScript

Angular.js基本概念和用法--（一MVC2）

2018-03-26 10:51 405 查看

上一章节：Angular.js基本概念和用法--（一MVC1）
一、如何复用Model<body>
<div>
<input ng-model="greeting.text"/>
<p>{{greeting.text}},Angular</p>
</div>
</body>这段代码只需要导入angular.js就可以了

在上面的input输入什么，下面的p标签会实时更新。这个过程是，在angular.js加载完成之后，会首先去查找ng-app这个指令，查找到ng-app之后，就会编译器认为ng-app里面所有的内容都归Angular去管，这时候他就会去找子层标签里面的指令，就会找ng-model，这个数据模型是挂载在rootscope这个根作用域上面的，所以在ng-app里面的所有子层标签都可以访问到greeting.text。
AngularJS的数据模型一般是绑定在$scope这个对象上面的。
二、如何复用View
1.利用Directive实现view复用<body>
<hello></hello>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_Directive.js"></script>

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hi everyone!</div>',
replace: true
}
});

具体的Directive的用法在后面的章节详细解说，现在只是先让大家了解一下MVC是如何运作的。
三、$scope
AngularJS的MVC是借助于$scope实现的。$scope也就是作用域。那么作用域到底是个什么样的东西呢？<div class="show-scope-demo">
<div ng-controller="GreetCtrl">
Hello {{name}}!
</div>
<div ng-controller="ListCtrl">
<ol>
<li ng-repeat="name in names">
{{name}} from {{department}}
</li>
</ol>
</div>
</div>

function GreetCtrl($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}

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

效果：

首先有两个控制器，一个叫GreetCtrl，另一个叫做ListCtrl。$rootScope是根作用域。
我们可以看到list列表里面的三个人名Igor，Misko，Vojta都是来自于ListCtrl控制器的，而Angular则是来自于GreetCtrl控制器里面在根作用域定义的全局变量。在内层的作用域里面如果查找不到变量，就会往上级作用域查找。<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>

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

效果：

这个demo的效果是，点击左边的emit按钮，上层的节点和同层的节点的count数量会增加，点击右边的broadcast按钮，下层的节点和同层的节点的count会增加。
scope这个对象还是有事件机制的，它有两种传播事件的方式，一种叫做向上传播，一种叫做向下传播。
1.神奇的$scope（一个JavaScript对象）
①$scope提供了一些工具方法$watch()/$apply()，这两个方法是用来实时监测一些对象属性的变化的，一般不会手动去调用；
②$scope是表达式的执行环境（或者叫做作用域）；
③$scope是一个树形结构，与DOM标签平行；
④子$scope对象会继承父$scope上的属性和方法；
⑤每一个Angular应用只有一个根$scope对象（一般位于ng-app上）；
⑥$scope可以传播事件，类似DOM事件，可以向上也可以向下；
⑦$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础；
⑧可以用angular.element($0).scope()进行调试。
2.$scope的生命周期

①注册
②监控
③检测模型变化，如果模型变化就会发出一些事件，去通知事件刷新
④检测有没有脏
⑤销毁。
下一章节：Angular.js基本概念和用法--（一路由、模块、依赖注入）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航