Angular初探(二)


今天主要想讲的是$scope,$rootScope,controller的继承等问题。相信许多像我一样的初学者在使用AngularJS开发前端的时候都会碰到一个问题,就是有些页面的控制逻辑会被一些其他页面用到,甚至是变量,举个例子,许多表单提交页面都由警告框来提示用户的输入错误,检查用户输入的函数以及控制警告框是否显示的逻辑根据编程的原则应该被复用。虽然这个例子举的不太当,但是我像表达的是一些涉及到页面元素的复用,将它们写作服务或者工厂显然是不合适的,这个时候我就十分怀念起面向对象里的继承了。但Angular的依赖注入是不允许也不应该允许把一个控制器注入到另一个控制器的依赖里的。控制器的继承并非与对象一样,是基于作用域继承的。

<div ng-controller="Ctr1">
    <p>{{name}}</p>
    <div ng-controller="Ctr2">
         <p>{{name}}</p>
    </div>
</div>

上面这一段简短的代码出现了两个控制器,现在让我们亮出angular的代码吧!

angular.module('myApp'[]).controller('Ctr1',function($scope){
    $scope.name="hello";
}).controller('Ctr2',function($scope,$timeout){
    function lll(){
   var timer=$timeout(function({
       $scope.name="jjj";},2000);
      });
    lll();
});

显然开始两端文字一样,后来下面的文字发生了变化,当子元素找不到相应变量时,会转向它的父元素,一直找不到,最终到达$rootScope,$rootScope属于module,一个module只有一个$rootScope,所有的$scope均由$rootScope生成。子元素对应的控制器修改变量并不能影响父元素。但$rootScope有点类似于C里面的全局变量,为属于同一个module的控制器提供了通过访问$rootScope来进行通信的一种途径。举个例子,一个有多个tab页的页面,对每个tab-content单独设置一个警告框实在太过于繁琐,但在父元素里放置警告框如何通过tab-content对应的controller改变框的状态呢?将警告框与$rootScope的变量联系起来,在子元素的控制器里修改$rootScope的对应变量即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值