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

时间:2022-11-26 07:38:59

I'm trying to use an element directive (restrict: "E") to define a custom component. Here's my page.html template, which gets pulled into index.html via the ng-view directive:

我正在尝试使用元素指令(restrict:“E”)来定义自定义组件。这是我的page.html模板,它通过ng-view指令被拉入index.html:

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

Angular IS running; index.html has the ng-app="templatesApp" directive in the body tag and app.js sets up the module as below:

Angular IS正在运行; index.html在body标签中有ng-app =“templatesApp”指令,app.js设置模块如下:

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

Further along, in app.js I have the popup directive defined:

此外,在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>'
    };
});

The problem is, when I look at the resultant html of the component, it looks like this:

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

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

So I have a few questions:

所以我有几个问题:

Why does the eng-popup directive console.log call NOT get triggered?

为什么eng-popup指令console.log调用不会被触发?

Why does the content in the eng-popup tag end up in a span?

为什么eng-popup标签中的内容最终会出现?

And most mysteriously of all, why does the eng-popup tag start with an END tag and end with a tag with 2 slashes?

而且最神秘的是,为什么eng-popup标签以END标签开头并以带有2个斜杠的标签结束?

Finally, what am I messing up, to make this all happen?

最后,我搞砸了什么,让这一切都发生了?

EDIT
As requested, here's a Plunker. It looks like the span and end-tag issues are not happening in this simplified version, but the eng-popup directive is still not being triggered:
https://plnkr.co/edit/mVa6Mye5besJAtWihMWF?p=preview

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

RE-EDIT
Just in case this is still solvable, here's the latest Plunkr I've been able to put together. It's not working, which it at least has in common with our real project. Not sure if it's the same problem though.
https://plnkr.co/edit/sJoYnYjqx9ZGIH0KhObC

重新编辑以防万一这仍然是可以解决的,这是最新的Plunkr我已经能够组合在一起。它不起作用,它至少与我们的真实项目有共同之处。不确定它是否是同样的问题。 https://plnkr.co/edit/sJoYnYjqx9ZGIH0KhObC

2 个解决方案

#1


0  

I've modified your example a bit (very little), and it seems to work OK?

我已经修改了你的例子(很少),它似乎工作正常吗?

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

What i've done is, remove the ui-router requirement, since you had not added the script reference. After that, it works. So, are you including ui-router in your project properly?

我所做的是,删除ui-router的要求,因为你没有添加脚本引用。在那之后,它的工作原理。那么,你在项目中正确包含ui-router吗?

#2


0  

So a colleague has pointed out it 'works' in Chrome. Turns out it's an IE8 issue. Who would have thought... (The whole reason we're using 1.2.29 is because many of our users will be accessing it via IE8, but it looks like custom directives are off the table).

所以一位同事指出它在Chrome中“有效”。原来这是一个IE8问题。谁会想到...(我们使用1.2.29的全部原因是因为我们的许多用户将通过IE8访问它,但看起来自定义指令不在桌面上)。

#1


0  

I've modified your example a bit (very little), and it seems to work OK?

我已经修改了你的例子(很少),它似乎工作正常吗?

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

What i've done is, remove the ui-router requirement, since you had not added the script reference. After that, it works. So, are you including ui-router in your project properly?

我所做的是,删除ui-router的要求,因为你没有添加脚本引用。在那之后,它的工作原理。那么,你在项目中正确包含ui-router吗?

#2


0  

So a colleague has pointed out it 'works' in Chrome. Turns out it's an IE8 issue. Who would have thought... (The whole reason we're using 1.2.29 is because many of our users will be accessing it via IE8, but it looks like custom directives are off the table).

所以一位同事指出它在Chrome中“有效”。原来这是一个IE8问题。谁会想到...(我们使用1.2.29的全部原因是因为我们的许多用户将通过IE8访问它,但看起来自定义指令不在桌面上)。