如何在自定義directive的callback中傳遞參數(shù)

directive是angularjs中一個比較復雜的概念，是用戶可自定義html標簽的重要手段，本博客之前有一篇文章對angularjs中directive的用法做了非常詳細的說明。

這篇文章有個部分提到了directive中關(guān)于scope的定義說明。

還是上篇文章的那個例子，

directives.directive('sites', ['$filter', function ($filter) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            sites: '=',
            selected: '=',
            change: '&'
        },
        template: [
            '<div class="site">',
                '<input type="text" class="site-input" ng-model="site" ng-change="manul()" ng-click="show($event)">',
                '<label class="placeholder" ng-show="showPlaceholder">輸入網(wǎng)站url，如：www.baidu.com</label>',
                '<span class="arrow"></span>',
                '<ul class="" ng-show="toggleList">',
                    '<li ng-repeat="site in sites" ng-click="selectSite(site)">[[site.url | pureURL]]</li>',
                '</ul>',
            '</div>'
        ].join(''),
        link: function (scope, element, attrs) {
            scope.toggleList = false;
            scope.showPlaceholder = true;
            scope.show = function(ev) {
                scope.toggleList = true;
                ev.cancelBubble = true;
                ev.preventDefault();
                ev.stopPropagation();
            };
            $(document).on('click', function() {
                scope.$apply(function () {
                    scope.toggleList = false;
                });
            });
            scope.manul = function() {
                scope.showPlaceholder = scope.site ? false : true;
            };
            scope.selectSite = function(site) {
                scope.selected = site;
                scope.site = $filter('pureURL')(site.url);
                // 調(diào)用change回調(diào)
                //scope.change(site);
                scope.change({
                    site: site
                });
            };
        }
    };
}]);

請注意這里，

scope: {
    sites: '=',
    selected: '=',
    change: '&'
}

其中，scope.change的值為&，從前面的文章中，我們可以知道，他表示這個directive在html中會有一個名字為change的attribute。而且這個attribute的類型還必須是一個函數(shù)。

html和js的代碼如下，

<!-- ... -->
<site sites="sites" selected="selectedSite" change="changeSite(site)"></site>
<!-- ... -->

var gxt = angular.module('gxt', []);
gxt.controller('index', ['$scope', function($scope) {
    $scope.sites = [{
        "id": "20112",
        "url": "http://www.baidu.com",
        "detected": true
    }, {
        "id": "20113",
        "url": "http://tieba.baidu.com",
        "detected": false
    }, {
        "id": "20114",
        "url": "http://ce.baidu.com",
        "detected": false
    }];
    $scope.changeSite = function(site) {
        console.log(site);
        // TODO do something with change callback
    };
    $scope.$watch('selectedSite', function(nv, ov) {
        console.log(nv, ov);
        // TODO check the model value
    });
}]);

值得注意的地方是，js的controller中，方法$scope.changeSite是帶有一個默認參數(shù)的，而這個參數(shù)又是從directive的定義中傳遞過來的，如下，

// ...
scope.selectSite = function(site) {
    scope.selected = site;
    scope.site = $filter('pureURL')(site.url);
    // 調(diào)用change回調(diào)
    //scope.change(site);
    scope.change({
        site: site
    });
};

這里我們在執(zhí)行change回調(diào)的時候，采用{site: site}這種形式，將參數(shù)傳遞給js controller中對應的方法。

下面是之前文章的解釋，

一般來說，我們希望通過一個表達式，將數(shù)據(jù)從isolate scope傳到parent scope中。這可以通過傳送一個本地變量鍵值的映射到表達式的wrapper函數(shù)中來完成。例如，如果表達式是increment(amount)，那么我們可以通過localFn({amount:22})的方式調(diào)用localFn以指定amount的值。