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错误：[$ injector：unpr]未知提供者：$ stateProvider＆lt; - $ state＆lt; - epMenuDirective

live example

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

}());

Answer 2

$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函数
使用jqLite，您无法使用angular.element('body')，而是使用$document服务

Here is a working example.

Answer 3

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

＆＃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;

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

3 个答案: