欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

关于angular中$parent 父亲 有大用

关于angular中$parent

96 
竿牍 
2017.07.28 12:03* 字数 174 阅读 1210评论 0

最近做一个运营系统,代码进行了大量封装

<!--引入 标题头 模板-->
<div ng-include="'module/header_module.html'"></div>
<!--引入 搜索 模板-->
<div ng-include="'module/search_module.html'"></div>
<!--引入 列表 模板 (其中包含分页指令)-->
<div ng-include="'module/list_module.html'"></div>

在各html模板中出现了很多的$parent,$parent是指父作用域

下面是$parent的学习总结

1、angular中的很多指令如ng-if、ng-repeat都会创建子作用域。
2、如果需要在子作用域中调用父作用域的变量,则可以使用$parent.variableName来调用。
3、调用子作用域和父作用域同名的变量,无$parent前缀则指的是调用的子作用域的变量,就像局部变量一样。

angular中的很多指令如ng-if、ng-repeat都会创建子作用域

来自 https://www.jianshu.com/p/f1c1837451cd


angularJS:ng-repeat作用域及父作用域调用$parent

一、关于ng-repeat的作用域学习:

1、ng-repeat会在上一级作用域名中创建一个子 作用域。

2、此时如果需要在子作用域中调用父作用域的变量,则可以使用$parent.variableName来调用。

3、ng-repeat中调用和父作用域同名的变量,无$parent前缀则指的是调用的子作用域的变量,就像局部变量一样。

4、ng-repeat中的indexelementinelementselementelementselementindex=0.

二、代码效果

三、详细代码

复制代码
 1 <DOCTYPE html>
 2 <html ng-app="app">
 3 <head>
 4 <meta charset="utf-8"/>
 5 <title>ng-repeat</title>
 6 <script src="jquery-1.10.2.min.js"></script>
 7 <script src="angular.min.js"></script>
 8 </head>
 9 <body >
10 <h1>scope</h1>
11 <div ng-controller="ParentCtrl" >
12 ParentCtrl:<br/>
13 父scope的countrywaibu:{{countrywaibu}}<br/>
14 父scope的countries:<br/>{{countries|json}}
15 <ul>
16 <li ng-repeat="countrywaibu in countries">ng-repeat:<br/>
17 child 中调用父scope的$parent.countrywaibu :{{$parent.countrywaibu}}<br/>
18 child中与父scope同名的countrywaibu的countrywaibu.name:    <input type="text" ng-model="countrywaibu.name"></input>
19     <span>{{countrywaibu.name}}</span><br/>
20     <button ng-click="remove($index)" >移除countries中的当前元素</button>
21 </li>
22 </ul>
23 </div>
24 
25 <script type="text/javascript" chartset="utf-8">
26 // the controller
27 var app=angular.module('app',[]);
28 app.controller('ParentCtrl',function($scope){
29     $scope.countrywaibu="waibu";
30     $scope.population = 7000;
31     $scope.countries = [
32         {name: 'France', population: 63.1},
33         {name: 'United Kingdom', population: 61.8}
34     ];
35     $scope.remove = function(index) {
36         //删除index下标的某个元素
37         $scope.countries.splice(index, 1);
38         }
39 });
40 </script>
41 
42 </body>
43 </html>
复制代码

 

分类: AngularJS


来自  https://www.cnblogs.com/luckyflower/p/4161917.html




普通分类: