AngularJS Controller作用域  更新时间:2017年01月09日 08:51:34   作者:Zerone1993   这篇文章主要为大家详细介绍了AngularJS Controller的作用域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 $scope代表视图与数据模型的中间桥梁:scope域中的对象都model和view都可以共享,并且数据是双向同步controller的作用域:主要负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用的原则在Jmeter测试框架,avalon的ms-controller同样体现) HTML正文: myCtrl01的作用域 名: 姓: 姓名: {{firstName + ” ” + lastName}} myCtrl02的作用域 名: 姓: 姓名: {{firstName + ” ” + lastName}} Javascript操作代码: //定义应用的控制器,负责具体数据处理: //定义angular应用的名称:myApp:一个html中只有一个应用,如果存在多个以第一个为准 var app = angular.module(‘myApp’, []); app.controller(‘myCtrl01’, function($scope) { /* 后台向scope域中存放对象:页面存放的标签: * ng-init 初始化变量 * ng-model:初始化变量并进行数绑定 */ $scope.firstName= “John”; $scope.lastName= “Doe”; }); app.controller(‘myCtrl02’, function($scope) { $scope.firstName= “Hello”; $scope.lastName= “Python”; }); 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: Angularjs全局变量被作用域监听的正确姿势 详细谈谈AngularJS的子级作用域问题 关于angularJs指令的Scope(作用域)介绍 浅谈angularJS 作用域 详解JavaScript的AngularJS框架中的作用域与数据绑定 详解AngularJS中的作用域 AngularJS实现单独作用域内的数据操作 AngularJS入门教程之Scope(作用域) 详解angularjs中的隔离作用域理解以及绑定策略 详谈AngularJs 控制器、数据绑定、作用域 AngularJS中的作用域实例分析 AngularJS Controller 作用域 相关文章 Angular使用动态加载组件方法实现Dialog的示例 这篇文章主要介绍了Angular使用动态加载组件方法实现Dialog的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 AngularJs自定义服务之实现签名和加密 AngularJS 是一个 JavaScript 框架,它可以通过 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下 2016-08-08 ionic3+Angular4实现接口请求及本地json文件读取示例 本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-10-10 AngularJS基础 ng-keypress 指令简单示例 本文主要介绍AngularJS ng-keypress 指令,这里对ng-keypress指令的基础资料整理,并附有实例代码,需要的小伙伴参考下 2016-08-08 AngularJs表单验证实例详解 这篇文章主要介绍了用AngularJs验证表单实例详解的相关资料,需要的朋友可以参考下 2016-05-05 Angularjs自定义指令实现三级联动 选择地理位置 这篇文章主要介绍了Angularjs自定义指令实现三级联动,选择地理位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 详解angularjs利用ui-route异步加载组件 本篇文章主要介绍了详解angularjs利用ui-route异步加载组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 AngularJs 指令详解及示例代码 本文主要介绍AngularJs 指令的知识,这里整理了详细的资料和简单示例代码帮助大家学习理解应用,有兴趣的小伙伴可以参考下 2016-09-09 angular2系列之路由转场动画的示例代码 本篇文章主要介绍了angular2系列之路由转场动画的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 详解AngularJS中ng-src指令的使用 这篇文章给大家详细介绍了AngularJS中ng-src指令的使用,对大家学习AngularJS具有一定参考价值,有需要的朋友们可以参考借鉴。 2016-09-09 最新评论

$scope代表视图与数据模型的中间桥梁:scope域中的对象都model和view都可以共享,并且数据是双向同步controller的作用域:主要负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用的原则在Jmeter测试框架,avalon的ms-controller同样体现)

HTML正文:

<!-- 指定应用名及控制器 -->
<body ng-app="myApp">

<div ng-controller="myCtrl01">
<p>myCtrl01的作用域</p>
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

<hr/>
<p>myCtrl02的作用域</p>
<div ng-controller="myCtrl02">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
</div>

Javascript操作代码:

//定义应用的控制器,负责具体数据处理:
//定义angular应用的名称:myApp:一个html中只有一个应用,如果存在多个以第一个为准
var app = angular.module('myApp', []);
app.controller('myCtrl01', function($scope) {

 /* 后台向scope域中存放对象:页面存放的标签:
 * ng-init 初始化变量 
 * ng-model:初始化变量并进行数绑定
 */
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

app.controller('myCtrl02', function($scope) {
 $scope.firstName= "Hello";
 $scope.lastName= "Python";
});

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Angularjs全局变量被作用域监听的正确姿势
  • 详细谈谈AngularJS的子级作用域问题
  • 关于angularJs指令的Scope(作用域)介绍
  • 浅谈angularJS 作用域
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定
  • 详解AngularJS中的作用域
  • AngularJS实现单独作用域内的数据操作
  • AngularJS入门教程之Scope(作用域)
  • 详解angularjs中的隔离作用域理解以及绑定策略
  • 详谈AngularJs 控制器、数据绑定、作用域
  • AngularJS中的作用域实例分析
张贴在3