angular學習筆記(三十)-指令(10)-require和controller

詩&遠方發表於2014-09-26
Angular筆記UIController

本篇介紹指令的最後兩個屬性,require和controller

當一個指令需要和父元素指令進行通訊的時候,它們就會用到這兩個屬性,什麼意思還是要看栗子:

html:

<outer‐directive> 
    <inner‐directive></inner‐directive>
</outer‐directive>

這裡有兩個指令,一個outer-directive指令元素,它裡面又有一個inner-directive指令元素.

js:

app.directive('outerDirective',function(){
    return {
        scope: {},
        restrict: 'AE',
        controller: function($scope,$compile,$http){
            this.addChild = function(nestedDirective){ //this指代controller   
            console.log('Got the message from nested directive' + nestedDirective.message);
            }
        }
    }
});    
app.directive('innerDirective',function(){
    return {
        scope: {},
        restrict: 'AE',
        require: '^?outerDirective',
        link: function(scope,elem,attrs,ctrl){
            //第四個引數是你require的controller例項
            scope.message = 'Hi, Parent directive';
            ctrl.addChild(scope);
        }
    };
});

在父元素指令裡定義controller方法:

function($scope,$compile,$http){   
   this.addChild = function(nestedDirective){ //this指代controller   
       console.log('Got the message from nested directive' + nestedDirective.message);
   }
}

controller方法是一個建構函式,可以給它新增物件的方法(什麼是物件的方法看這裡:mvc-javascript-web-application / 01.MVC和類 / 1.建立類庫 / ex1.3(物件的方法).html).

在子元素指令裡定義require屬性:require: '^?outerDirective',表示向外層尋找outerDirective指令,直到找到為止.注意:向外層尋找,也包括了自己本身,也就是說,自己可以尋找到自己身上的其它指令.

'?'的作用是如果找不到也不會報錯.

定義了require屬性後,link函式的第四個引數ctrl就是require到的指令的controller方法的例項.所以ctrl就有了addChild方法了. 

 

下面看一個難一點的栗子:

angular學習筆記(三十)-指令(9)-一個簡單的指令示例這個栗子是單個子選單的展開收起,下面使用require和controller,來擴充套件這個應用,改成多個選單,要求點選某個選單的時候展開此選單,而其餘選單都收起:

如下過程:

html:

<!DOCTYPE html>
<html ng-app="accordionModule">
<head>
  <title>20.10 指令-accordion</title>
  <meta charset="utf-8">
  <link href="../bootstrap.css" rel="stylesheet">
  <script src="../angular.min.js"></script>
  <script type="text/ng-template" id="vertical.html">
    <div class="btn-group-vertical" ng-transclude>
    </div>
  </script>
  <script type="text/ng-template" id="text.html">
    <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" type="button" ng-click="toggle()">{{title}}<span class="caret"></span></button>
      <ul class="dropdown-menu" ng-show="ifShow" ng-transclude></ul>
    </div>
  </script>
  <script src="script.js"></script>
  <style type="text/css">
    body{
      padding:40px
    }
  </style>
</head>
<body>
  <div ng-controller="accordionCtrl">
    <accordion>
      <expander ng-repeat="list in lists" my-title="{{list.title}}">
        <li ng-repeat="content in list.contents">
          <a href="">{{content}}</a>
        </li>
      </expander>
    </accordion>
  </div>
</body>
</html>

js:

/*20.10 指令*/
var accordionModule = angular.module('accordionModule',[]);
accordionModule.controller('accordionCtrl',function($scope){
    $scope.lists = [
        {title:'標題1',contents:['bunny1','cat1','dog1']},
        {title:'標題2',contents:['bunny2','cat2','dog2']},
        {title:'標題3',contents:['bunny3','cat3','dog3']},
        {title:'標題4',contents:['bunny4','cat4','dog4']},
        {title:'標題5',contents:['bunny5','cat5','dog5']},
        {title:'標題6',contents:['bunny6','cat6','dog6']},
        {title:'標題7',contents:['bunny7','cat7','dog7']},
        {title:'標題8',contents:['bunny8','cat8','dog8']}
    ]
});
accordionModule.directive('accordion',function(){
    return {
        restrict:'EA',
        replace:true,
        templateUrl:'vertical.html',
        transclude:true,
        controller:function(){
            this.expanders = [];
            this.closeAll = function(scope){
                angular.forEach(this.expanders,function(expander){
                    if(scope!=expander)
                    expander.ifShow = false;
                })
            };
            this.addExpander = function(scope){
                this.expanders.push(scope)
            }
        }
    }
});
accordionModule.directive('expander',function(){
    return {
        restrict:'EA',
        replace:true,
        templateUrl:'text.html',
        transclude:true,
        scope:{title:'@myTitle'},
        require:'^?accordion',
        link:function(scope,ele,attrs,ctrl){
            scope.ifShow = false;
            ctrl.addExpander(scope);
            scope.toggle = function(){
                ctrl.closeAll(scope);
                scope.ifShow = !scope.ifShow;
            }
        }
    }
});

下面來解釋這個應用:

1. accordion指令的controller的例項也就是link函式的第四個引數ctrl

2. 將expander指令進行ng-repeat,渲染出多個子選單.

3. 由於這些子選單是互相有關聯而非獨立存在的,所以將他們放在一個accordion指令中.

4. 繫結資料模型都和單獨的expander一樣,唯一不同的是: 

    1) link函式中呼叫ctrl的addExpander方法,將每個expander的獨立scope壓入ctrl的expanders陣列中.

    2) toggle()方法,它呼叫了accordion指令的controller的例項的方法.收起除了當前點選項以外其餘的選單.

5. 注意ctrl是唯一的ctrl,而不是每次都例項化出一個新的例項.雖然有多個expander,但是它的ctrl指向的是同一個例項,所以expanders陣列是唯一的.

6. 這裡expanders陣列裡存放是每個expander的scope,為什麼是scope而不是element呢? 因為closeAll方法需要修改指令獨立作用域下的ifShow的,所以這裡陣列裡存放scope比較好寫.

完整程式碼: https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.10%20%E6%8C%87%E4%BB%A4.html

             https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js

             

 

相關文章