3 - 模型和作用域 scope
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>
来源: https://juejin.im/post/5a96741e6fb9a063523e24dd