AngularJS Controller作用域
程序员文章站
2022-05-24 15:43:53
$scope代表视图与数据模型的中间桥梁：scope域中的对象都model和view都可以共享，并且数据是双向同步controller的作用域：主要负责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";
});
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。