1

Помогите пожалуйста разобраться.

Я написал директиву, она выводит элемент, на который повешено событие. после клика на элемент должна срабатывать функция goTo(), которая находится в пределах этой же директивы. но она не срабатывает. В этом проблема

js:

angular.module('menus', [])
  .directive("epMenu", ['$timeout', '$state',
    function ($timeout, $state) {
      return {
        link: function (scope, element, attrs) {
          scope.goTo = function(link) {
            console.log('go to', link);
          };

          var navigationElem = angular.element("<div class='ep-menu-navigation'><li ng-click='scope.goTo('main')'>qwerty</li></div>");

          angular.element('body').append(navigationElem);
        },

        restrict: "EACM"
      }
    }]);

JSFILLDE

3
  • почему просто не использовать template свойство?
    – Grundy
    Commented 27 окт. 2016 в 9:52
  • Насколько я вижу, я его и не использую...
    – cyklop77
    Commented 27 окт. 2016 в 9:59
  • 1
    вот я и спрашиваю: почему?
    – Grundy
    Commented 27 окт. 2016 в 9:59

1 ответ 1

3

Так как вставляет просто html, чтобы в нем заработали директивы ангуляра, нужно воспользоваться сервисом $compile, чтобы скомпилировать переданный html, и далее связать его с нужным scope.

angular.module('menus', [])
  .directive("epMenu", ['$timeout', '$compile',
    function($timeout, $compile) {
      return {
        link: function(scope, element, attrs) {
          scope.goTo = function(link) {
            console.log('go to', link);
          };

          var navigationElem = $compile(angular.element("<div class='ep-menu-navigation'><li ng-click='goTo(\"main\")'>qwerty</li></div>"))(scope);

          angular.element(document.body).append(navigationElem);
        },

        restrict: "EACM"
      }
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-app="menus">
  <div ep-menu>click me</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.