码迷,mamicode.com
首页 > Web开发 > 详细

angularJS(4)

时间:2017-01-04 22:53:08      阅读:435      评论:0      收藏:0      [点我收藏+]

标签:lin   tool   定义   html   java   pos   lang   href   comm   

angularJS(4)

一:angulaJs的作用域scope

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
Scope 可应用在视图和控制器上。
AngularJS 应用组成如下 :$scope是一个模型
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

在之前的内容中说到的都是只有一个作用域的,但是在大型的项目当中,可能会存在多个的作用域

如下面的例子:

技术分享
技术分享
<div ng-app="myapp">
     <h1  style="color:#ff0000" ng-controller="mycc">{{myname}}</h1>
    <h1 ng-controller="ucc">{{myname}}</h1>
</div>
<script language="javascript">
 var app=angular.module("myapp",[]);
 app.controller("mycc",function($scope){
     $scope.myname="猪八戒";
 })
 app.controller("ucc",function($scope){
     $scope.myname="唐三藏";
 })
</script>
技术分享
技术分享

二:angularJs的根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

如下面的例子:

技术分享
技术分享
<div ng-app="myapp">
    <h1 style="color:#f00" ng-controller="mycc">姓名:{{uname}},性别:{{usex}}</h1>
    <h1 style="color:#00f" ng-controller="ucc">姓名:{{uname}},性别:{{usex}}</h1>
</div>
<script language="javascript">
 var app=angular.module("myapp",[]);
 app.controller("mycc",function($scope,$rootScope){
       $scope.uname="金角大王";
       $rootScope.uname=$scope.uname;
       $scope.usex="公";
     })
 app.controller("ucc",function($scope,$rootScope){
      $scope.uname=$rootScope.uname;
      $scope.usex="母"
     })
</script>
技术分享

angularJS(4)

标签:lin   tool   定义   html   java   pos   lang   href   comm   

原文地址:http://www.cnblogs.com/gh0408/p/6250379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!