Как реализовать событие click по директиве?

Question

Помогите исправить сценарий.

я просто сделать директиву:

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

, но он не работает. Мне нужно, чтобы при нажатии кнопки запуска функции GOTO()

Теперь консоль следующее сообщение об ошибке:

VM436 angular.js:12520 Error: [$injector:unpr] Unknown provider: $stateProvider <- $state <- epMenuDirective

live example

Answer 1

$state является поставщиком, который зарегистрирован в ui.router модуле, так что вы должны заложить эту зависимость:

angular.module('menus', ["ui.router"]) 

Кроме того, если вы строят шаблон динамически в функции link, вы должны скомпилировать его так, чтобы угловой может применить к нему свои действия:

.directive("epMenu", ['$timeout', '$state', '$compile', 
    function ($timeout, $state, $compile) { 
     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='goTo('main')'>qwerty</li></div>"); 

       $compile(navigationElem)(scope, function(cloned){ 
        angular.element('body').append(cloned); 
       }); 
      }, 
      restrict: "EACM" 
     } 
    }]); 

Вы также были некоторые другие ошибки в коде:

• Отсутствующих Угловой щ маршрутизатор сценарий
• Использованием scope.goTo вместо того, чтобы просто goTo
• Не избежать кавычек в goTo функции
• Использования jqLite, вы не можете использовать angular.element('body'), вместо этого используйте услугу $document

Here is a working example.

Answer 2

Прежде всего, вы должны иметь ui.router впрыскивается в зависимости для модуля ,

angular.module('menus',["ui.router"]) 

Если вы хотите, чтобы изменить состояние при нажатии на ссылку, созданной в соответствии с директивой, создать контроллер для директивы.

использовать $state.go в контроллере для перенаправления.

В моем ответе я использовал контроллер, который меняет state на menu при нажатии на ссылку директивы.

Вот код для его достижения,

(function() { 

    angular.module('menus') 

    directive('epMenu', function() { 

    var controller = ['$scope','$state', function ($scope,$state) { 

      $scope.goTo = function(link) { 
      $state.go(link) 
      }; 

     }], 

     template = "<div class='ep-menu-navigation'><li ng-click='goTo('main')'>qwerty</li></div>"; 

     return { 
      restrict: 'EA', //Default in 1.3+ 
      controller: controller, 
      template: template 
     }; 
    }); 

}()); 

Answer 3

Ошибка в коде, потому что он не находит зависимость для $state. вы должны добавить angular.module('menus', ["ui.router"]), потому что $state зарегистрирован внутри ui-router. Также вы должны добавить правильный js для ui-router. Вы можете связать событие click внутри функции ссылок.

angular.module('menus', ["ui.router"]).directive("epMenu", ['$timeout', '$state', 
 
    function($timeout, $state) { 
 
    return { 
 
     link: function(scope, element, attrs) { 
 
     element.find('button').bind('click', function() { 
 
      console.log("click"); 
 
     }); 
 
     }, 
 
     restrict: "EACM" 
 
    } 
 
    } 
 
]);

angular.module('menus', 
 
["ui.router"])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
 
<div ng-app="menus"> 
 
    <ep-menu> 
 
    this is normal text 
 
    <button> 
 
     Click Me 
 
    </button> 
 
    </ep-menu> 
 
</div>