Question

我有一个包含多个自定义指令的网页，本例中为2。每个指令都会加载一个带有几个<a>标记的HTML页面，用于在我的SPA上进行路由。在我完成并测试一个指令之后，我开始处理另一个指令，我无法获得链接。这些指令加载了所需的页面，其上有<a>个链接，<a>链接不起作用：

<custom-directive-one></custom-directive-one>
<custom-directive-two></custom-directive-two>

以这种方式，<custom-directive-two>工作正常，这是我完成的第一个指令。 <custom-directive-one>不起作用。

直到我这样做

<custom-directive-one></custom-directive-one>
<!-- <custom-directive-two></custom-directive-two> -->

那样<custom-directive-one>有效。

我正在使用AngularJs版本1.6.2。请帮忙。

这里是一个Plunker示例，虽然不能让它工作。如果有人能告诉我为什么Plunker示例不起作用，我将非常感激：http://plnkr.co/edit/owbz2Yt9EXybTy9cfdsu?p=preview

Answer 1

我对您的代码进行了一些更改，包括使用组件而不是指令，这是Angular 1.5之后的推荐做法。你基本上没有正确终止你的IIFE，拼错你的一个模板的名称，并有其他小问题。

(function(app) {

  //var app = angular.module('mainModule');

  app.component('customDirectiveOne', {
    templateUrl: 'linkListONE.html',
    controller: 'ListOneController',
    controllerAs: 'ctrl'
  });

  app.component('customDirectiveTwo', {
    templateUrl: 'linkListTWO.html',
    controller: 'ListTwoController',
    controllerAs: 'ctrl'
  });

  app.controller('ListOneController', function() {

  });
  app.controller('ListTwoController', function() {

  });

})(app);

这是最后的plunker。

AngularJs多个自定义指令失败

1 个答案: