查看: 196|回复: 0

Angular作用域

发表于 2018-1-9 15:34:43
Angular作用域是基于原型模式实现,1 子作用域可以继承父作用域中的变量以及属性(变量值定义在作用域$scope上的变量)2 父作用域无法使...

Angular作用域是基于原型模式实现

1 子作用域可以继承父作用域中的变量以及属性变量值定义在作用域$scope上的变量

2 父作用域无法使用子作用域的变量以及属性继承是单向的

3 子作用域一旦定义与父作用域相同的变量就会覆盖父作用域中的变量此时自作用中如何展现不

会受父作用域中变量值的影响


在子作用域中访问父作用域可以通过$parent属性访问
在某个作用域中访问兄弟作用域

$$prevSibling 访问前一个兄弟作用域

$$nextSibling 访问后一个兄弟作用域

这几种情况是不建议使用的。因为会将作用域偶何在一起。

1 <body ng-app='app'>

2 <h1>{{msg}}</h1>

3 <div ng-controller="otherBrother"></div>

4 <div class="main" ng-controller="parent">

5 <h2 ng-click="changeParent()">{{msg}}</h2>

6 <div class="child" ng-controller="child">

7 <h3 ng-click="changeChild()">{{msg}}</h3>

8 </div>

9 </div>

10 <div ng-controller="brother">

11 <h4>{{msg}}</h4>


12 </div>

13

14 app.run(function ($rootScope) {

15 // 将全局作用域下的变量赋值给根作用域中的msg变量

16 $rootScope.msg = msg

17 })

18 app.controller('parent', function ($scope, $rootScope, $element) {

19 // console.log($element)

20 console.log($scope)

21 // 给h2设置红色背景

22 $element.find('h2').css('background', 'red')

23 // console.log($rootScope)

24 // $scope.msg = 'parent msg'

25 $scope.changeParent = function () {

26 // 更改自身作用看是否影响兄弟作用域

27 $scope.msg = 'parent msg'

28 // $rootScope.msg = 'root msg'

29 // $scope.$parent.msg = 'new root msg'

30

31 // 修改兄弟作用域的内容

32 $scope.$$nextSibling.msg = 'new brother msg'

33 }

34 })

35 // 定义child控制器

36 app.controller('child', function ($scope) {

37 // console.log($scope, 111)

38 $scope.changeChild = function () {

39 $scope.msg = 'child msg'

40 }

41 })

42 // 定义brother控制器

43 app.controller('brother', function ($scope) {

44 $scope.msg = 'brother'

45 })

46 // 定义otherBrother控制

47 app.controller('otherBrother', function ($scope) {

48 $scope.msg = 'otherBrother'

49 })

NG - href

Ng-href动态创建a的href属性

与href直接插值相比,具有的优越性就是,可以提高用户体验

当没有数据时候,作为普通元素展示,

当有数据的时候作为a标签展示

这个指令比较特殊,插值时候必须加上{{}},

1 <a ng-href="{{baidu}}">百度</a>

NG - src
Ng-src 动态创建img的src属性

它对于体验的提高是很有价值的

当没有数据时候,不会创建src属性

当有数据的时候,会创建src属性

这个指令比较特殊,插值必须加上{{}}

1 <img ng-src="src" alt="">

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/


相关热词搜索:[color=rgb(14, 98, 192) !important]作用
上一篇:angular 课堂笔记 脏值检测 下午复习
下一篇:[url=]最后一页[/url]




回复

使用道具 举报