Angularjs之controller 和filter（四）

时间 2019-11-17

标签 angularjs controller filter 栏目 AngularJS 繁體版

原文原文链接

Controller组件（http://www.angularjs.cn/A00C）javascript

在AngularJS中，控制器是一个Javascript函数（类型/类），用来加强除了根做用域之外的做用域实例的。当你或者AngularJS自己经过scope.$new俩建立一个新的子做用域对象时，有一个选项能让你将它当作参数传递给控制器。这能使AngularjS将控制器和这个做用域联系起来，加强做用域的行为。css

控制器用于：html

设置好做用域对象的初始状态。
给做用域对象增长行为。

正确使用控制器：java

保持控制器职责单一的最多见作法是将那些不属于控制器的工做抽离到服务中，而后经过依赖注入在控制器中使用这些服务。这在依赖注入服务的章节中会详细讨论。jquery

不要用控制器干下面的事情：angularjs

控制器应该只关心业务逻辑。DOM操做（表现层逻辑）一般会把测试弄得很难。将任何表现层逻辑放到控制器中都会显著地增长对业务逻辑的测试难度。AngularJS提供dev_guide.templates.databinding用来自动进行DOM操做。若是你须要手动操做DOM，将表现层的逻辑抽离到指令中。
对输入格式化 — 你应该用AngularJS的表单控制来实现格式化。.
对输出格式化 — 该用AngularJS的过滤器实现。.
在控制器中运行无状态或者有状态但在控制器中共享的代码 — 该用服务来实现.
实例化组件或者控制其它组件的生命周期（好比建立一个服务的实例）.

控制器构造函数和方法的例子bootstrap

为了阐述AngularJS的控制器组件的运行原理，让咱们来建立一个拥有下面这些组件的小应用：数组

一个有两个按钮和一条消息的模板
一个叫spice的字符串模型。
一个拥有两个方法的控制器。方法是用来设置spice的值得。

模板中的消息包含了一个对spice模型的绑定，它初始的字符串是“very”。这个spice模型会被设置成 chili 或者 jalapeno，这取决于哪一个按钮会被点击。消息会经过data-binding自动更新。app

一个 spice 控制器例子（阐述了控制器的特色：1给对象初始化2给对象添加行为）ide

<button ng-click="chiliSpicy()">Chili</button>

<button ng-click="jalapenoSpicy()">Jalapeño</button>

<p>The food is {{spice}} spicy!</p>

</body>

function SpicyCtrl($scope) {

$scope.spice = 'very';

$scope.chiliSpicy = function() {

$scope.spice = 'chili';

}

$scope.jalapenoSpicy = function() {

$scope.spice = 'jalapeño';

}

例子中有下面这些须要注意：

ngController指令是用来（隐式地）为模板建立做用域的。而且使用命令中指定的spicyCtrl控制器来加强这个做用域。
spicyCtrl只是一个纯Javascript函数。使用了驼峰式命名法（可选）命名并以Ctrl或者Controller结尾。
对做用域对象赋予一个新的属性会建立或者更新模型。
控制器方法可以直接经过赋格做用域对象这个方式建立（如例子中的chiliSpicy方法）。
控制器中的所用方法都能在模板中调用（在body元素或者子元素中）.
NB:AngularJS的老版本（1.0RC以前的）能让你用它来替换$scope方法。可是如今不行了。在做用域中定义的方法中，他和$scope是能够互换的（AngularJS将它设置成$scope），那是在你的控制器构造函数中就不行了。
NB: AngularJS的老版本（1.0RC以前的）自动给做用域对象原型添加方法，如今不会了。全部的方法都必须手动添加到做用域。
- 控制器方法参数的例子
- <body ng-controller="SpicyCtrl">
- <input ng-model="customSpice" value="wasabi">
- <button ng-click="spicy('chili')">Chili</button>
- <button ng-click="spicy(customSpice)">Custom spice</button>
- <p>The food is {{spice}} spicy!</p>
- </body>
- function SpicyCtrl($scope) {
- $scope.spice = 'very';
- $scope.spicy = function(spice) {
- $scope.spice = spice;
- }
- }
- 注意SpicyCtrl控制器只定义了一个叫spicy的方法，它接受一个叫作spice的参数。和这个控制器相关的模板在第一个按钮事件中传递了一个chili常量给控制器方法，在第二个按钮中传递一个模型属性。

Angularjs 过滤器（学习文章：http://www.tuicool.com/articles/ueUZBv）

1.详尽内容看学习文章

2.自定义过滤器

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。话很少说，咱们来写一个看看。好比我须要一个过滤器，它能够返回一个数组中下标为奇数的元素，代码以下：

app.filter('odditems',function(){

    return function(inputArray){

        var array = [];

        for(var i=0;i<inputArray.length;i++){

            if(i%2!==0){

                array.push(inputArray[i]);//(d)  push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 此例子中将数组下标为基数的值，赋值给空数组array

        return array;

});


实例代码：

   <!DOCTYPE html>
   <html ng-app="xmpl">
   <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Controller组件实例学习</title>
  <link rel="stylesheet" href="css/bootstrap.min.css"> 
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/angular.min.js"></script> 
  <script type="text/javascript">var app=angular.module('xmpl',[]);</script> 
  <style type="text/css">
    .border{border: 2px solid #ccc; width: 80%;
      margin: 20px auto;}

  </style> 
   </head>
   <body >
   <div class="border">
   <!-- 控制器方法参数的例子
   ============================================ -->
       <h3>1.控制器方法参数的例子</h3>
       <ul>
        <li>一个有两个按钮和一条消息的模板</li>
        <li>一个叫<code class="prettyline">spice</code>的字符串模型。</li>
        <li>一个拥有两个方法的控制器。方法是用来设置<code class="prettyline">spice</code>的值得。</li>
      </ul>
       <div ng-controller="SpicyCtrl">
         <input ng-model="customSpice" value="wasabi">
         <button ng-click="spicy('chili')">Chili</button>
         <button ng-click="spicy(customSpice)">Custom spice</button>
         <p>The food is {{spice}} spicy!</p>
       </div>
         <script type="text/javascript"> 
               app.controller('SpicyCtrl',function ($scope) {
               $scope.spice = 'very';
               $scope.spicy = function(spice) {
               $scope.spice = spice;
             }
            });
         </script>
     </div>
   <!-- 控制器继承示例
   =========================================== -->
   <div class="border">
      <h3>2.控制器继承示例,做用域层级</h3>
       <ul>
        <li> 根做用域</li>
        <li>MainCtrl做用域， 它包含了模型timeOfDay和模型name。</li>
        <li>ChildCtrl做用域，它继承了上层做用域的timeOfDay，复写了name。</li>
        <li>BabyCtrl做用域，复写了MainCtrl中定义的timeOfDay和ChildCtrl中的name。</li>
      </ul>
      <div ng-controller="MainCtrl">
       <p>Good {{timeOfDay}}, {{name}}!</p>
       <div ng-controller="ChildCtrl">
         <p>Good {{timeOfDay}}, {{name}}!</p>
         <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
      </div>
      </div>  
      <script type="text/javascript">
         app.controller('MainCtrl',function ($scope) {
           $scope.timeOfDay = 'morning';
           $scope.name = 'Nikki';
         });
         app.controller('ChildCtrl',function ($scope) {
           $scope.name = 'Mattie';
         });
          app.controller('BabyCtrl',function ($scope) {
           $scope.timeOfDay = 'evening';
           $scope.name = 'Gingerbreak Baby';
         });
     </script>
   </div>

<!-- 3.Angularjs 反向输出字符串过滤器
 ==================================-->
   <div class="border">
     <h3>3.Angularjs 过滤器</h3>
     <div ng-controller="Ctrl">
      <input ng-model="greeting" type="greeting"><br>
      No filter: {{greeting}}<br>
      Reverse: {{greeting|reverse}}<br>
      Reverse + uppercase: {{greeting|reverse:true}}<br>
    </div>
   </div>
<script>
    
    app.filter('reverse', function() {
      return function(input, uppercase) {
        var out = "";
        for (var i = 0; i < input.length; i++) {
          out = input.charAt(i) + out;
        }
        // conditional based on optional argument
        if (uppercase) {
          out = out.toUpperCase();
        }
        return out;
      }
    });
     app.controller('Ctrl',function ($scope) {
      $scope.greeting = 'hello';
    });

</script>

<!-- 反向输出字符串测试======================== -->
<div class="border">
 <h3>反向输出字符串测试</h3>
<p>reverse 函数的测试 ，运用到charAt()函数：(d)charAt() 方法可返回指定位置的字符,返回的字符是长度为 1 的字符串 (m) stringObject.charAt(index)</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

<button id="btn3">设置值</button>

  <script>
$(document).ready(function(){
  $("#btn3").click(function(){
    var result=reverse($("#test3").val());
    $("#test3").val(result);
  });
});

  function reverse(input){
  var out="";
  for (var i = 0; i < input.length; i++) {
    out = input.charAt(i) + out;
  }
 return out;
}
</script>
</div>
   </body>
   </html>