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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。