angular學習筆記(三十)-指令(9)-一個簡單的指令示例

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

學了前面這麼多關於指令的知識,現在就用指令來寫一個小元件:expander

這個元件的功能就是點選開展選單,再點選收起選單:

↑↓點選展開收起

下面來看它的程式碼:

html:

<!DOCTYPE html>
<html ng-app="expanderModule">
<head>
  <title>20.9 指令-expander</title>
  <meta charset="utf-8">
  <link href="../bootstrap.css" rel="stylesheet">
  <script src="../angular.min.js"></script>
  <script type="text/ng-template" id="text.html">
    <div class="btn-group">
      <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" 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="expanderCtrl">
    <expander my-title="{{title}}">
      <li ng-repeat="content in contents">
        <a href="">{{content}}</a>
      </li>
    </expander>
  </div>
</body>
</html>

js:

/*20.9 指令*/
var expanderModule = angular.module('expanderModule',[]);
expanderModule.controller('expanderCtrl',function($scope){
    $scope.title = "標題";
    $scope.contents = ['bunny','cat','dog'];
});
expanderModule.directive('expander',function(){
    return {
        restrict:'EA',
        replace:true,
        templateUrl:'text.html',
        transclude:true,
        scope:{title:'@myTitle'},
        link:function(scope,ele,attrs){
            scope.ifShow = false;
            scope.toggle = function(){
                scope.ifShow = !scope.ifShow;
            }
        }
    }
});
//指令元素裡原本就包含的內容,他的作用域使用元素所在的作用域的父作用域,而不是指令的獨立scope,所以contents值可以訪問到控制器的contents,但是template裡面的值卻是訪問指令獨立作用域的.
//這裡的myTitle不會被修改,所以採用@和=繫結都可以

下面來分析一下這個指令:

1.建立一個名叫expander的指令,它的型別是元素

2.指令元素裡面放置的是子選單的內容,注意是內容,不是整個ul.因為它要作為一坨插入到ng-transclude元素中,所以,ul必須充當ng-transclude這個元素的角色,然後設定transclue:true.

3.指令的my-title屬性用於繫結父作用域的title屬性.在這個案例中,使用@繫結和使用=繫結都是可以的.

4.在link函式裡給指令獨立scope新增ifShow屬性.然後在ul子選單裡通過ng-show="ifShow"來繫結它的顯示與隱藏

5.在link函式裡給指令獨立scope新增toggle()方法,切換ifShow.然後給按鈕繫結ng-click="toggle()",來改變ifShow的值.

6.在控制器裡新增相關的資料模型:title和contents

*7.這一點很重要:

     我在expander指令元素裡面寫了:ng-repeat="content in contents".

     然後在text.html模板裡寫了:ng-click="toggle()" , {{title}} , ng-show="ifShow".

　　對於expander指令元素來說,寫在它裡面的內容,它的作用域就是指令所在的元素的作用域,也就是父作用域,所以它可以訪問到控制器裡的contents模型.

　　但是text.html,作為指令的模板,被替換到指令,寫在模板裡面的內容,它的作用域就是指令的獨立作用域.也就是指令裡定義的scope,所以它是不能訪問到contents的,而toggle方法,ifShow屬性,都已經在寫link函式時,通過scope引數給指令獨立作用域繫結了這兩個屬性和方法.title屬性也通過@策略繫結父作用域的title屬性.

     總結來說就是:原來就寫在指令裡面的內容,它的作用域還是父作用域,和指令的scope無關.

                      指令的template裡面的內容,它的作用域是指令的作用域,就是定義指令時候寫的scope屬性

 

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

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

 

相關文章