Декорирование директивы путем добавления функции, которая будет вызывать контроллер директивы

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

}]);

Надеюсь, что хорошо понял тему.