3-模型和作用域 scope
angular1.x 学习目录
ng-model
- ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
- ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
验证用户输入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS类
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
总结一下
- ng-valid: 验证通过
- ng-invalid: 验证失败
- ng-valid-[key]: 由$setValidity添加的所有验证通过的值
- ng-invalid-[key]: 由$setValidity添加的所有验证失败的值
- ng-pristine: 控件为初始状态
- ng-dirty: 控件输入值已变更
- ng-touched: 控件已失去焦点
- ng-untouched: 控件未失去焦点
- ng-pending: 任何为满足$asyncValidators的情况
scope
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
如何使用
使用 ng 创建控制器的时候，你可以将 $scope 当做一个参数传递
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。 Model(模型), 当前视图中可用的数据。 Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。 scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
- 如果你修改了视图，模型和控制器也会相应更新：
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>
思考和反思
root.变量名}}来显示的，当然也可以赋值给$scope.
- $rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
在控制器中使用scope：{{ myf }}<br/>
在控制器中使用rootScope：{{ allf }}<br/>
在控制器中使用scope按钮事件：
<input type="button" value="scope点击事件" ng-click="sayHello()"/>
</div>
不在控制器中使用scope：{{ myf }}<br/>
不在控制器中使用rootScope：{{ allf }}<br/>
<div ng-controller="myCtrl2">
比较私有域变量是否可以他用 {{mys}} {{myf}}
</div>
不在控制器中使用scope按钮事件：
<input type="button" value="scope点击事件" ng-click="sayHello()"/>
</body>
<script>
var app = angular.module('myApp',[]);
// 两个控制器
app.controller('myCtrl', ['$scope', '$rootScope',myCtrl]);
app.controller('myCtrl2', ['$scope','$rootScope', myCtrl2]);
function myCtrl($scope,$rootScope){
$scope.myf = 1;
$scope.sayHello = function(){
alert("hello world");
}
$rootScope.allf = '全局1';
}
function myCtrl2($scope,$rootScope){
$scope.mys = 2;
$rootScope.alls = '全局2';
}
</script>
