angularjs在指令中使用子作用域

下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起。 13

ng-appng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域。ng-app AngularJS 应 用 创 建 $rootScope , ng-controller 则 会 以 $rootScope 或 另 外 一 个

ng-controller的作用域为原型创建新的子作用域。1. ng-app

任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。$rootScope是作用域链的起始点,任何嵌套在ng-app内的指令都会继承它。在JavaScript代码中通过run方法来访问$rootScope

     <html ng-app="myApp">
         <body>

{{ someProperty }}

      <button ng-click="someAction()"></button>
         </body>

</html>

     angular.module('myApp', [])
     .run(function($rootScope) {
         $rootScope.someProperty = 'hello computer';
         $rootScope.someAction = function() {
             $rootScope.someProperty = 'hello human';
         };

});

在线示例:http://jsbin.com/ICOzeFI/2/edit

这里为了演示方便,像使用全局作用域一样使用$rootScope,实际生产中不建议这样做。

可以在整个文档中只使用一次ng-app。如果需要在一个页面中放置多个AngularJS应用,需要手动引导应用。第24章会深入讨论手动引导应用。

2. ng-controller内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域,避免将所有操作

模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。

ng-controller接受一个参数expression,这个参数是必需的。

expression参数是一个AngularJS表达式。

$scope只是一个JavaScript对象,其中含有从父级$scope中通过原型继承得到的方法和属性,包括应用的$rootScope

嵌套在ng-controller中的指令有访问新子$scope的权限,但是要牢记每个指令都应该遵守的和作用域相关的规则。

回想一下,$scope对象的职责是承载DOM中指令所共享的操作模型。 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值