Decorating a directive by adding a function that will call the directive's controller

Question

I use a directive that is declared like this :

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

The controller of the directive is :

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

Actually, the directive has a scope containing a filter object which contains two attributes filter : { enabled : boolean, filter : object} and the directive is used like this :

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

when the button is clicked the filter.enabled is set. My purpose is to add a behavior that will permit to change filter.enabled value via a function external to the directive.

The directive will look like this :

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

where fn will take the somevariable and set it to the filter.enabled.

Thanks in advance,

Answer 1

If you want to enable/disable a filter through the pressure of a button why not declare a filter with the property eui-enabled set to a custom toggling variable?

In other words it would result as:

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

}]);

Hope to have understood well the topic.