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编译因为看起来jQuery插件想要初始化元素的点还没有。

我有遗失吗？谢谢！

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

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

Answer 1

当您呼叫$（“＃test”）时，摘要尚未在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，只需使用$（元素）代替，除非你的jQuery绝对需要Id。

AngularJS模板中的动态ID

1 个答案: