AngularJS自定義Directive初體驗

 

通常我們這樣定義個module並隨之定義一個controller.

 

var app = angular.module('myApp', []);

app.controller('CustomersController', ['$scope', function($scope){
    var counter = 0;
    
    $scope.customer = {
        name:'',
        street:''
    };
    
    $scope.customers = [
        {
            name:'',
            street:''
        },
        ...
    ];
    
    $scope.addCustomer = function(){
        counter++;
        $scope.customers.push({
            name:'' + counter,
            street: coutner + ''
        });
        
        $scope.changeData = function(){
            counter++;
            $scope.customer = {
                name: '',
                street:counter + ''
            };
        }
    }
}]);

 

■ 使用ng-include引用子視圖

在一個子視圖中可以使用CustomersController，子視圖的名稱是：child.html

 

Name:{{customer.Name}}
Street:{{customer.street}}

然后在一個主視圖中比如是index.html使用子視圖：

<div ng-include="child.html"></div>

■ 初識自定義directive

如果使用自定義directive也可以做到。

 

angular.module('myApp').directive('myInfo', function(){
    return{
        template:'Name:{customer.name}<br/>Street:{{customer.street}}'
    };
})

 

在index.html主視圖中可以這樣使用自定義的directive。

<div my-info></div>

為什么myInfo到了視圖中變成了my-info?這是一個慣例，比如我們經常用到的ng-repeat,在AngularJS中的源代碼中是ngRepeat。還有，為什么，自定義的名稱為myInfo的directive可以使用CustomersController的scope呢？因為主視圖index.html中使用了CustomersController,而同在index.html視圖中的<div my-info></div>共享了CustomersController的scope。

directive通常的用法包括如下：

 

angular.module('modulename')
    .directive('myDirective', function(){
        return {
            restrict: 'EA', //E表示element, A表示attribute,C表示class，M表示commnent,即注釋
            scope:{
                title: '@' //@讀屬性值，=雙向綁定，&用戶函數
            }
            template: '<div>{{myVal}}</div>',
            templateUrl: 'app/sample.html',
            controller: 'myController',
            link:function($scope, element, attrs){}//DOM操作
        };
    })

 

■ 自定義direcitve操作DOM元素

 

app.directive('myDomDirective', function(){
    return {
        link: function($scope, ele, attrs){
            ele.bind('click', function(){
                ele.html('');
            });
            
            ele.bind('mouseenter', function(){
                ele.css('background-color','red');
            });
            
            ele.bind('mouseleave', function(){
                ele.css('background-color','white');
            });
        }
    };
});

 

在頁面中這樣使用：

<div my-dom-directive></div>

■ 封閉自定義directive的scope

默認情況下，自定義的directive的會共享父scope，但是，有時候我們希望自定義的directive的scope是封閉的、獨立的，比如希望自定義的direcitve被用在多處。

只需要加上scope屬性就好了，如下：

 

angular.module('myDirecitve', function(){
    return {
        scope:{},
        template: ''
    }
});

 

scope屬性接受一個對象，在該對象中可以定義獨立scope內的屬性，而屬性值的寫法有三種，分別是@,=,&

● 使用@，外部scope賦值不影響封閉scope中的變量

 

angular.module('myApp').directive('myIsolateScopeWithName', function(){
    return {
        scope:{
            name: '@'
        },
        template: 'Name:{{name}}',
        controller: 'MyController'
    };
});

 

在封閉的scope中定義了一個name變量，占位符@表示這里接受一個值。

如何給這里的變量賦值呢？

一種是把name成為一個屬性來接收值：

<div my-isolated-scope-with-name name="{{ customer.name }}"></div>

一種是在MyController中給name賦值：

$scope.name = '';

如果把name="{{ customer.name }}"改成myname="{{ customer.name }}"呢？

那就需要這樣定義：

angular.module('myApp').directive('myIsolateScopeWithName', function(){
    return {
        scope:{
            name: '@myname'
        },
        template: 'Name:{{name}}',
        controller: 'MyController'
    };
});

 

● 使用=，外部scope賦值會影響封閉scope中的變量

 

angular.module('myApp').directive('myIsolateScopeWithEqual', function(){
    return {
        scope:{
            customer: '='
        },
        template: '<ul><li ng-repeate="prop in customer">{{prop}}</li></ul>'
    };
});

 

注意，這里的customer是作為變量在使用，而不是{{customer}},一旦外部的賦值發生變化會影響獨立scope中的customer變量值。同樣，一旦獨立scope中的customer值發生變化，也會影響外部的scope的customer屬性值。

外部這樣使用：

<div my-isolated-scope-with-equal customer="customer"></div>


● 使用&，允許外部scope傳遞一個函數給封閉scope

 

angular.module('myApp').directive('myIsolateScopeWithFunction', function(){
    return {
        scope: {
            datasource: '=',
            action:'&'
        },
        template: '<ul><li ng-repeat="prop in datasource">{{ prop }}</li></ul> ' + '<button ng-click="action()">Change Data</button>'
    };
});

 

這樣使用這個directive

 

<div my-isolated-scope-with-function 
     datasource="customer" 
     action="changeData()">
</div>

 

changeData方法被定義在了controller里面：

 

$scope.changeData = function () {
      counter++;
      $scope.customer = {
          name: 'James',
          street: counter + ' Cedar Point St.'
      };
};

 

如何讓外部scope傳遞一個帶參函數給封閉scope呢？

 

angular.module('directivesModule').directive('isolatedScopeWithController', function () {
    return {
        restrict: 'EA',
        scope: {
            datasource: '=',
            add: '&',
        },
        controller: function ($scope) {
            ...

           
            $scope.addCustomer = function () {
                //Call external scope's function
                var name = 'New Customer Added by Directive';
                $scope.add({ name: name });

                //Add new customer to directive scope
                $scope.customers.push({
                    name: name,
                    street: counter + ' Main St.'
                });
            };
        },
        template: '<button ng-click="addCustomer()">Change Data</button>' +
                  '<ul><li ng-repeat="cust in customers">{{ cust.name }}</li></ul>'
    };
});

 

在頁面中這樣調用：


<div isolated-scope-with-controller datasource="customers" add="addCustomer(name)"></div>

■ 允許自定義的direcitve被嵌套


只要把tranclude設置成true就可以。

 

"use strict";

angular.module("psFramework").directive("psFramework",function(){
    return {
        transclude: true,
        scope:{
            title: '@',
            subtitle:'@',
            iconFile:'@'
        },
        controller: "psFrameworkController",
        templateUrl: "ext-modules/psFramework/psFrameworkTemplate.html"
    };
})

 

然后在頁面中就可以這樣使用：

 

<ps-framework title="", subtile="", icon-file="">
    <ps-menu>
        ...
    </ps-menu>
</ps-framework>

 

參考：https://weblogs.asp.net/dwahlin/