Использование функции Factory внутри вложенной директивы

Question

У меня возникли проблемы с использованием функции Factory внутри моих вложенных директив.

Главный код работает, потому что он был протестирован на контроллере. Все мои файлы JavaScript загружаются в начале.

Это сценарий:

получить доступ todoController.js с использованием маршрутов, то он вызывает TaskList директиву , которая вызывает задачи директиву.

Я пытаюсь реализовать этот код (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); 

И на моем HTML я называю это так:

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

HTML-ответов является:

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

И задача Directi ве с кодом модальным:

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

И я знаю, что это не работает, потому что директива задачи не распознает нг-Клик функцию от модальных Директив.

Как я могу это решить?

Answer 1

Я решил это с помощью метода AngularJS.

Переписывая modalService.js к:

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

Использование функции компиляции и postLink, он держит нг-клик атрибут, как если бы это было всегда.

И, мне просто нужно, чтобы очистить мою задач службы:

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