CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
klauskpm
klauskpm

Reputation: 3125

Use Factory function inside nested Directive

I'm having some trouble using a Factory function inside my nested Directives.

The main code is working, because it was tested on Controller. All my JavaScript files are loaded at the beginning.

This is the scenario:

I access todoController.js using routes, then it calls the taskList Directive, which calls the task Directive.

I'm trying to implement this code(modalService.js):

(function(angular) {
    gameOnApp.directive('modalButton', function($compile) {
        return {
            restrict: 'A',
            priority: 1001,
            terminal: true,
            compile: function(elm, attrs) {
                elm.attr('ng-click', "modal.openModal('" + attrs.modalId + "')");

                elm.removeAttr('modal-button');
                elm.removeAttr('modal-id');

                var fn = $compile(elm);
                return function(scope){
                    scope.modal = Modal;
                    fn(scope);
                };
            }
        }
    });

    gameOnApp.factory('Modal', function(){
        return {
            openModal: function(modalId) {
                console.log(modalId);
            }
        }
    });
})(window.angular);

And on my HTML I call it like this:

<li>
    <span modal-button modal-id="12"><i class="fa fa-edit fa-fw"></i> Edit</span>
</li>

The HTML responses is:

<li>
    <span ng-click="modal.openModal('12')"><i class="fa fa-edit fa-fw"></i> Edit</span>
</li>

And the task Directive with the modal code:

gameOnApp.directive('task', function($compile, Modal) {
    return {
        restrict: 'E',
        scope: false,
        templateUrl: 'app/components/todo/taskView.html',
        compile: function(elm, attrs){
            return function(scope){
                scope.modal = Modal;
            }
        }
    };
});

And I know that it's not working because task Directive is not recognizing the ng-click function from Modal Directive.

How can I solve this?

Upvotes: 0

Views: 147

Answers (1)

klauskpm
klauskpm

Reputation: 3125

I've solved it by using the AngularJS way.

Rewriting modalService.js to:

(function(angular) {
    gameOnApp.directive('modalButton', function($compile, Modal) {
        return {
            restrict: 'A',
            priority: 1001,
            terminal: true,
            compile: function compile(elm, attrs, transclude) {
                return function postLink(scope, iElement, iAttrs, controller) {
                    iElement.attr('ng-click', "modal.openModal('" + attrs.modalId + "')");

                    iElement.removeAttr('modal-button');
                    iElement.removeAttr('modal-id');

                    scope.modal = Modal;

                    var fn = $compile(iElement);
                    fn(scope);
                }
            }
        }
    });

    gameOnApp.factory('Modal', function(){
        return {
            openModal: function(modalId) {
                console.log(modalId);
            }
        }
    });
})(window.angular);

Using compile function and postLink, it keeps the ng-click attribute, as if it was always there.

And, I just needed to clean my task Service:

gameOnApp.directive('task', function($scope) {
    return {
        restrict: 'E',
        templateUrl: 'app/components/todo/taskView.html'
    };
});

Upvotes: 1

Related Questions