AngularJS 模型+Scope(作用域)+控制器+过滤器

作者: 鹿守心畔光 | 来源:发表于2016-12-14 17:05 被阅读130次

5、Scope of AngularJS
AngularJS 模型+Scope(作用域)+控制器+过滤器
2017-5-20 AngularJS 学习笔记
AngularJS_scope嵌套原型链与方法
angular之中，$scope $rootScope $wat
Angularjs 作用域
AngularJS Scope(作用域)
【Hybrid开发高级系列】AngularJS(二)——常用$服
AngularJS之Scope(作用域)
angularJs 的作用域 $scope

AngularJS ng-model 指令模型)

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

// 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>

尝试一下 »

双向绑定
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

// AngularJS 实例
<div ng-app="myApp" ng-controller="myCtrl">    
    名字: <input ng-model="name">    
    <h1>你输入了: {{name}}</h1>
    <!-- 或者使用 ng-bind -->
    <h1>你输入了: <span ng-bind="name"></span></h1>
</div>

尝试一下 »

验证用户输入

// AngularJS 实例
<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 的情况下显示。

应用状态
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

// AngularJS 实例
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">    
    Email:    
    <input type="email" name="myAddress" ng-model="myText" required>    
    <h1>状态</h1>    
    {{myForm.myAddress.$valid}}    
    {{myForm.myAddress.$dirty}}    
    {{myForm.myAddress.$touched}}
</form>

尝试一下 »

CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

// AngularJS 实例
<style>
input.ng-invalid {    
    background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">            
   输入你的名字:    
   <input name="myAddress" ng-model="text" required>
</form>

尝试一下 »
ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

如何使用 Scope

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

// AngularJS 实例
// 控制器中的属性对应了视图上的属性：
<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 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

Scope 概述

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 实例
如果你修改了视图，模型和控制器也会相应更新：

<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="name">
  <h1>我的名字是 {{name}}</h1>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {    
    $scope.name = "John Dow";
  });
</script>

尝试一下 »

Scope 作用范围

了解你当前使用的 scope 是非常重要的。
在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
AngularJS 实例
当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>    
    <li ng-repeat="x in names">{{x}}</li>    
  </ul>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {    
    $scope.names = ["Emil", "Tobias", "Linus"];
  });
</script>

尝试一下 »
每个 < li> 元素可以访问当前的重复对象，这里对应的是一个字符串，并使用变量 x 表示。

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 实例
创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

<div ng-app="myApp" ng-controller="myCtrl">
  <h1>{{lastname}} 家族成员:</h1>
  <ul>      
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
  </ul>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $rootScope) {    
    $scope.names = ["Emil", "Tobias", "Linus"];    
    $rootScope.lastname = "Refsnes";
  });
</script>

AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
     姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {        
  $scope.firstName = "John";    $scope.lastName = "Doe";});</script>

尝试一下 »
应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" �属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法（变量和函数）：
AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>姓名: {{fullName()}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {    
      $scope.firstName = "John";    
      $scope.lastName = "Doe";    
      $scope.fullName = function() {        
      return $scope.firstName + " " + $scope.lastName;    
      }});
  </script>

尝试一下 »

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>

尝试一下 »

其他实例
以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) { 
  $scope.names = [ 
    {name:'Jani',country:'Norway'}, 
    {name:'Hege',country:'Sweden'}, 
    {name:'Kai',country:'Denmark'}
  ];
});

保存文件为 namesController.js:
然后，在应用中使用控制器文件:
AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">
  <ul>  
    <li ng-repeat="x in names">    
      {{ x.name + ', ' + x.country }}  
    </li>
  </ul>
</div>
<script src="namesController.js"></script>

尝试一下 »

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)
uppercase 过滤器将字符串格式化为大写：
AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
  <p>姓名为 {{ lastName | uppercase }}</p>
</div>

尝试一下 »
lowercase 过滤器将字符串格式化为小写：
AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
  <p>姓名为 {{ lastName | lowercase }}</p>
</div>

尝试一下 »

currency 过滤器

currency 过滤器将数字格式化为货币格式：
AngularJS 实例

<div ng-app="myApp" ng-controller="costCtrl">
  <input type="number" ng-model="quantity">
  <input type="number" ng-model="price">
  <p>总价 = {{ (quantity * price) | currency }}</p>
</div>

尝试一下 »

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组：
AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">
  <ul>  
    <li ng-repeat="x in names | orderBy:'country'">    
      {{ x.name + ', ' + x.country }}  
    </li>
  </ul>
</div>

尝试一下 »

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
AngularJS 实例

<div ng-app="myApp" ng-controller="namesCtrl">
  <p><input type="text" ng-model="test"></p>
  <ul>  
    <li ng-repeat="x in names | marked" style="border: 0px; margin: 0px; padding: 0px;">filter:test | orderBy:'country'">    
      {{ (x.name | uppercase) + ', ' + x.country }}  
    </li>
  </ul>
</div>

尝试一下 »

5、Scope of AngularJS
AngularJS Scope(作用域) Scope是应用在HTML（视图）和JavaScript（控制器）之间的...
AngularJS 模型+Scope(作用域)+控制器+过滤器
AngularJS ng-model 指令模型) ng-model 指令用于绑定应用程序数据到 HTML 控制器(...
2017-5-20 AngularJS 学习笔记
控制器的作用域每个控制器都对应一个模型，也就是 $scope 对象，不同层级控制器下的 $scope 产生了作用...
AngularJS_scope嵌套原型链与方法
引导：在angularJS中，有应用（模块），控制器（controller），作用域（scope）三个概念。一个...
angular之中，$scope $rootScope $wat
1.背景介绍 1、AngularJS Scope(作用域) Scope(作用域)是应用在 HTML (视图)和 J...
Angularjs 作用域
非常详细? ：AngularJS实例教程（二）——作用域与事件 Scope 概述, AngularJS 应用组成如...
AngularJS Scope(作用域)
是什么是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。是一个对象，有方法和属性是模型...
【Hybrid开发高级系列】AngularJS(二)——常用$服
1 常用$服务 1.1 $scope scope是angularJS中的作用域(其实就是存储数据的地方)，很类似j...
AngularJS之Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是...
angularJs 的作用域 $scope
作用域提供了监视数据模型变化的能力。它允许开发者使用其中的apply机制，将数据模型的变化在整个应用范围内进行通...