你的位置:首页 > 软件开发 > Java > 剖析AngularJS作用域

剖析AngularJS作用域

发布时间:2016-08-15 01:00:36
一、概要在AngularJS中,子作用域(child scope)基本上都要继承自父作用域(parent scope)。但,事无绝对,也有特例,那就是指令中scope设置项为对象时,即scope:{…},这将会让指令创建一个并不继承自父作用域的子作用域,我们 ...

剖析AngularJS作用域

一、概要

在AngularJS中,子作用域(child scope)基本上都要继承自父作用域(parent scope)。

但,事无绝对,也有特例,那就是指令中scope设置项为对象时,即scope:{…},这将会让指令创建一个并不继承自父作用域的子作用域,我们称之为隔离作用域(isolated scope)。

指令中的scope一共可以有三个值,下面我们再来温习下:

指令之scope

scope: false

默认值,指令不会新建一个作用域,使用父级作用域。

scope: true

指令会创建一个新的子作用域,原型继承于父级作用域。

scope: {…}

指令会新建一个隔离作用域,不会原型继承父作用域。

那么,理解AngularJS中作用域继承有什么用呢?

原因之一就是,有利于我们使用“双向绑定”(也就是在form表单元素中绑定ng-model),例如,在初学AngularJS时,我们常会遇到“双向绑定”不起作用的时候,如下:

<!DOCTYPE html>  <head>    <meta charset="utf-8"/>    <script src='/images/loading.gif' data-original="angular.js"></script>  </head>  <body ng-app="myApp">    parent:<input type="text" ng-model="name"/>    <div ng-controller="TestCtrl">      child: <input type="text" ng-model="name"/>      </div>    <script>      var app = angular.module('myApp', []);      app.controller('TestCtrl', function(){});    </script>  </body></html>

原标题:剖析AngularJS作用域

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。