Question

我尝试使用元素指令（限制：＆＃34; E＆＃34;）来定义自定义组件。这是我的 page.html 模板，该模板通过ng-view指令进入 index.html ：

<eng-popup>This text appears, but is rendered in a span</eng-popup>

Angular IS正在运行; index.html 在body标记中包含ng-app="templatesApp"指令， app.js 设置模块如下：

var app = angular.module("templatesApp", ['ngRoute']);

此外，在 app.js 中我定义了popup指令：

app.directive('engPopup', function() {
    console.log("This console log does not trigger. I have tried 'eng-popup' as the directive's first parameter, but that doesn't work either.");
    return {
        restrict: 'E',
        transclude: false,
        template: '<div id="thisDoesNotEvenAppear"></div>'
    };
});

问题是，当我查看组件的结果html时，它看起来像这样：

<span class="ng-scope" jQuery110209261664696867675="7">This text should appear, surely</span>
</eng-popup class="ng-scope" jQuery110209261664696867675="8"><//eng-popup>

所以我有几个问题：

为什么eng-popup指令console.log调用NOT被触发？

为什么eng-popup标记中的内容最终会出现在span？

中

最神奇的是，为什么eng-popup标签以END标签开头并以带有2个斜杠的标签结束？

最后，我搞砸了什么，让这一切都发生了？

修改
根据要求，这是一个Plunker。看起来这个简化版本中没有发生span和end-tag问题，但是eng-popup指令仍然没有被触发：
https://plnkr.co/edit/mVa6Mye5besJAtWihMWF?p=preview

RE-修改
为了防止这仍然是可以解决的，这里是最新的Plunkr我已经能够组合在一起了。它不起作用，它至少与我们的真实项目有共同之处。不确定它是否也是同样的问题 https://plnkr.co/edit/sJoYnYjqx9ZGIH0KhObC

Answer 1

我已经修改了你的例子（很少），它似乎工作正常吗？

https://plnkr.co/edit/3NlHNDOCBVRktk3ZcsnV?p=preview

我所做的是删除ui-router要求，因为您尚未添加脚本参考。在那之后，它的工作原理。那么，您是否正确地在项目中包含ui-router？

Answer 2

所以一位同事已经指出它的作用＆＃39;在Chrome中。结果证明它是一个IE8问题。谁曾想到... （我们使用1.2.29的全部原因是因为我们的许多用户将通过IE8访问它，但看起来自定义指令不在桌面上。）

自定义指令标记不触发指令代码，在angularjs 1.2.29中

2 个答案: