如何实现指令的点击事件？答案

【问题标题】：how realize click event on directive?如何实现指令的点击事件？
【发布时间】：2016-10-27 18:40:53
【问题描述】：

请帮助修复脚本。

我做简单的指令：

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 错误：[$injector:unpr] 未知提供者：$stateProvider

live example

【问题讨论】：

语法错误解决了吗？

标签： angularjs

【解决方案1】：

$state 是在ui.router 模块中注册的提供程序，因此您必须放置该依赖项：

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

另外，如果您在 link 函数中动态构建模板，您必须编译它以便 Angular 可以对其应用其操作：

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

您的代码中还有其他一些错误：

缺少 Angular ui 路由器脚本
使用scope.goTo 而不仅仅是goTo
不转义 goTo 函数中的引号
使用jqLite，不能使用angular.element('body')，而是使用$document服务

Here is a working example.

【讨论】：

【解决方案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
      };
  });

}());

【讨论】：

@prozaek.prozaek，我希望你想在点击指令元素时改变状态。请检查我的答案一次
@prozaek.prozaek，发生了什么？我的代码有什么问题吗？

【解决方案3】：

代码中的错误是因为它没有找到$state 的依赖项。您必须添加angular.module('menus', ["ui.router"])，因为$state 已在ui-router 中注册。您还必须为ui-router 添加适当的js。您可以在链接函数中绑定点击事件。

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>

【讨论】：