如何在指令上实现点击事件?

时间:2016-10-27 09:35:32

标签: angularjs

请帮助修复脚本。

我只是指示:

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&lt; - $ state&lt; - epMenuDirective

live example

3 个答案:

答案 0 :(得分:1)

首先,您应该将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
      };
  });

}());

答案 1 :(得分: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"
        }
    }]);

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

  • 缺少角度ui路由器脚本
  • 使用scope.goTo代替goTo
  • 未转义goTo函数
  • 中的引号
  • 使用jqLit​​e,您无法使用angular.element('body'),而是使用$document服务

Here is a working example.

答案 2 :(得分:1)

代码中的错误是因为它找不到$state的依赖项。您必须添加angular.module('menus', ["ui.router"]),因为$state已在ui-router内注册。您还必须为ui-router添加适当的j。您可以在链接功能中绑定click事件。

&#13;
&#13;
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"
    }
  }
]);
&#13;
angular.module('menus',
["ui.router"])
&#13;
<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>
&#13;
&#13;
&#13;