通過添加將調用指令控制器的函數來裝飾指令

Question

我使用這樣聲明的指令：

    (function (directives) {
    var FilterDirective = (function () {
        function FilterDirective() {
            var directive = {};
            directive.restrict = 'A';
            directive.scope = true;
            directive.controller = elasticui.controllers.FilterController;
            directive.link = function (scope, element, attrs, filterCtrl) {
                scope.$watch(element.attr('eui-filter') + " | euiCached", function (val) { return scope.filter.filter = val; });
                var enabled = false;
                var enabledAttr = element.attr('eui-enabled');
                if (enabledAttr) {
                    scope.$watch(enabledAttr, function (val) { return scope.filter.enabled = val; });
                    enabled = scope.$eval(enabledAttr);
                }
                scope.filter = {
                    filter: scope.$eval(element.attr('eui-filter') + " | euiCached"),
                    enabled: enabled
                };
                filterCtrl.init();
            };
            return directive;
        }
        return FilterDirective;
    })();
    directives.FilterDirective = FilterDirective;
    directives.directives.directive('euiFilter', FilterDirective);
})

指令的控制器是：

    (function (controllers) {
    var FilterController = (function () {
        function FilterController($scope) {
            this.scope = $scope;
        }
        FilterController.prototype.init = function () {
            var _this = this;
            if (this.scope.filter.filter) {
                var isEnabled = this.scope.filters.contains(this.scope.filter.filter);
                if (!isEnabled && this.scope.filter.enabled) {
                    this.scope.filters.add(this.scope.filter.filter);
                    isEnabled = true;
                }
            }
            this.scope.filter.enabled = isEnabled;
            this.scope.$watch('filter.enabled', function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    _this.updateFilter();
                }
            });
            this.scope.$watch('filter.filter', function (newVal, oldVal) {
                if (!elasticui.util.EjsTool.equals(oldVal, newVal)) {
                    if (oldVal) {
                        _this.scope.filters.remove(oldVal);
                    }
                    _this.updateFilter();
                }
            });
        };
        FilterController.prototype.updateFilter = function () {
            if (!this.scope.filter.filter) {
                return;
            }
            if (this.scope.filter.enabled) {
                this.scope.filters.add(this.scope.filter.filter);
            }
            else {
                this.scope.filters.remove(this.scope.filter.filter);
            }
        };
        FilterController.$inject = ['$scope'];
        return FilterController;
    })();
    controllers.FilterController = FilterController;
})

實際上，該偽指令的作用域包含一個filter對象，該對象包含兩個屬性filter : { enabled : boolean, filter : object}並且該偽指令的用法如下：

        <label class="btn"  ng-model="filter.enabled"
            eui-filter="ejs.TermFilter('field','value')"  btn-checkbox>

單擊該按鈕時，將設置filter.enabled。 我的目的是添加一種行為，該行為將允許通過指令外部的函數來更改filter.enabled值。

該指令將如下所示：

        <label class="btn"  ng-model="filter.enabled"
            eui-filter="ejs.TermFilter('field','value')" eui-enable-fn="fn(somevariable)" btn-checkbox>

其中fn將采用somevariable並將其設置為filter.enabled 。

提前致謝，

Answer 1

如果要通過按鈕的壓力啟用/禁用過濾器，為什么不聲明將eui-enabled屬性設置為自定義切換變量的過濾器？

換句話說，它將導致：

HTML：

<label class="btn" eui-filter="..." eui-enabled="my_toggling_variable">

<button type=button ng-click="toggleVar()"></button>

JS：

myApp.controller('myCtrl', ['$scope', function($scope) {

  $scope.my_toggling_variable = false;

  $scope. toggleVar = function(){
    $scope.my_toggling_variable = !$scope.my_toggling_variable;
  };

}]);

希望已經很好地理解了這個話題。