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;
  };

}]);

希望能够很好地理解这个话题。

通过添加一个将调用指令控制器的函数来装饰指令

1 个答案: