AngularJS Controller作用域
更新时间：2017年01月09日 08:51:34 作者：Zerone1993
这篇文章主要为大家详细介绍了AngularJS Controller的作用域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
$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";
});
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解如何构建一个Angular6的第三方npm包,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了详解angular2封装material2对话框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要为大家详细介绍了angularjs实现多张图片上传并预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
本篇文章主要介绍了angular4 共享服务在多个组件中数据通信的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
如果你正在构建一个使用 API 的应用程序,你会想在开发过程中使用测试环境的 API 密钥,而在生产环境中使用生产环境的 API 密钥,在本教程中,你将学习如何在 Angular 中使用环境变量,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了AngularJS实现的回到顶部指令功能,结合实例形式分析了AngularJS返回到顶部功能的具体步骤与相关实现技巧,需要的朋友可以参考下2017-05-05
如何利用@angular/cli V6.0直接开发PWA应用详解
这篇文章主要给大家介绍了如何利用@angular/cli V6.0直接开发PWA应用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用@angular/cli V6.0具有一定的参考学习价值，需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了Angular2生命周期钩子函数的详细介绍，Angular提供组件生命周期钩子，可以让我们更好的开发Angular应用，有兴趣的可以了解一下2017-07-07
本篇文章主要介绍了AngulaJS路由 ui-router 传参实例 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论