分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

AngularJs scope详解

发布时间:2023-09-06 01:10责任编辑:苏小强关键词:Angular

一.scope是什么?

  scope是表达式(expression)的执行上下文,scope可以监测($watch)表达式(expression)的变化和传播事件($emit,$broadcast).

二.scope特性

  1.scope提供$watch API,用于监测model的变化

       2.scope提供$apply API,将angular环境外的dom操作应用到angular环境上

       3.scope通过原型,从parent scope继承属性。child scope可以直接访问parent scope上的属性,parent scope没法直接访问child scope上的属性

三.scope层次结构

  每一个angular应用有且仅有一个root scope,但可以拥有多个child scope。

       应用可以拥有多个child scope,一些directive会创建新的child scope(如ng-repeat)。当新的scope创建后,它们将作为一个child scope添加到parent scope上,这样创建了一个与它们附属的DOM相似的树结构。

      当angular对表达式求值时,它首先查看与当前元素关联的scope的属性。如果没有找到对应的属性,它将会一直向上搜索parent scope,直到到达root scope。在javascript中,这个行为被称为‘原型继承’,child scope 典型继承自它们的parent scope。

四.scope事件传播

  scope可以类似于DOM事件的方式进行事件传播。事件可以被broadcast到child scope中或者被emit到parent scope中(当前scope有监听也会执行)

  1.parent scope向child scope  broadcast 广播事件和child scope向parent scope emit 分发事件示例:

<!DOCTYPE html><html><head> ???<title>angular1.x</title> ???<script type="text/javascript" src="../lib/angular1.6.5.js"></script></head><body ng-app="app"> ???????<div ng-controller="parent"> ???????{{count}} ???????<div ng-click="$broadcast(‘toChild‘)">向子元素broadcast事件</div> ???????<ul ng-controller="child"> ???????????{{count1}} ???????????<li ng-click="$emit(‘toParent‘)" ng-repeat="item in [1,2,3,4,5,6,7]">{{item}}</li> ???????????????????</ul> ???</div><script type="text/javascript"> ???var app = angular.module(‘app‘,[]); ???app.controller(‘parent‘,[‘$scope‘,function($scope){ ???????$scope.count = 1; ???????$scope.$on(‘toParent‘,function(){ //child scope $emit向上分发的监听 ???????????$scope.count++; ???????}); ???????$scope.$on(‘toChild‘,function(){ //当前scope有监听,也会执行 ???????????$scope.count++; ???????}) ???}]); ???app.controller(‘child‘,[‘$scope‘,function($scope){ ???????$scope.count1 = 1; ???????$scope.$on(‘toChild‘,function(){ ?//parent scope $broadcast向下广播的监听 ???????????$scope.count1++; ????????}) ???}]);</script></body></html>

该示例中,点击li 父元素的count会+1;点击‘向子元素broadcast事件’,父count和子的count1页也会+1,至于父的count怎么会加1是因为当前scope中有 toChild监听。

 四.scope的生命周期

AngularJs scope详解

原文地址:http://www.cnblogs.com/erduyang/p/7501354.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved