AngularJS 模板中的动态 ID

Question

我将 jQuery 插件包装在 AngularJS 指令中。我想调用指令的方式是例如：

<my-dialog data-trigger-id="myTriggerId">My dialog content...</my-dialog>

在我的指令模板中，它看起来像这样：

<button id="{{triggerId}}">Button text...</button>

我在指令的 link 函数中附加了 jQuery 插件的事件（您在其中指定触发器选择器）。我的问题是，如果我像这样在指令模板中硬编码按钮的 id，它就会工作：

<button id="myTriggerId">Button text...</button>

生成的 html 在浏览器中看起来很好，这意味着呈现具有动态 ID 的元素有效。只是如果我使用动态 id，jQuery 插件找不到这个元素，但它适用于硬编码版本。我还查找了 AngularJS compile 因为它看起来像 jQuery 插件想要初始化的元素还不存在。

有没有我遗漏的问题？谢谢！

编辑：我终于设法简化了它并创建了一个 jsfiddle 示例。如果您运行这个例子，您将在控制台中看到该元素在我记录它时不存在，但是如果您检查 DOM，您将看到它在那里并且有正确的编号。但是，如果您在模板中对 id 进行硬编码（id=test 而不是 id={{elemId}}），控制台日志将显示可以找到一个元素。我希望这有助于找到解决方案。

http://jsfiddle.net/a1nxyv8u/7/

Answer 1

当您称呼您 $("#test").length.

时，摘要尚未呈现在 DOM 中

您需要添加 $timeout 以便摘要完成，然后调用您的方法

var app = angular.module('app', []);
app.directive('myDialog', ['$timeout', function ($timeout) {
    return {
        restrict: 'E',
        template: '<button id="{{elemId}}" class="{{elemClass}}">Open dialog</button>',
        link: function (scope, element, attrs) {

            var selector = scope.elemSelector,
            elemClass = (selector.indexOf('.') > -1) ? selector.substr(1) : '',
            elemId = (selector.indexOf('#') > -1) ? selector.substr(1) : '';

            scope.elemClass = elemClass;
            scope.elemId = elemId;

            $timeout(function() {
                console.log('elem: ', $('#test').length);
            });
            // jQuery plugin init here but element doesn't seem to exist yet.

        },
        scope: {
            elemSelector: '@'
        }
    }
}]);

尽管应该注意，您应该尝试完全减少任何 Id 并只使用 $(element) 代替，除非您的 jQuery 绝对需要该 Id。

AngularJS 模板中的动态 ID

Dynamic id inside AngularJS template

angularjs

angularjs-directive