Question

我有一个包含jQuery插件（cubeportfolio）的指令。该插件将基本的html图像列表呈现为响应网格。

myDirective：

angular.module('myModule')
    .directive('myDirective', function ($timeout) {
        return {
            restrict: 'A',
            compile: function(tElement, tAttrs) {
                return function (scope, element, attrs) {

                    element.on('$destoy', function() {
                        element.myPlugin('destroy');
                    });

                    $timeout(function() {
                        console.log(attrs);
                        element.myPlugin({
                            myPluginOpt1: attrs.myPluginOpt1,
                            myPluginOpt2: attrs.myPluginOpt2,
                            ...
                        });
                    }, 0, false);
                }
            }
        }
    });

简化的HTML标记：

<div myDirective myPluginOpt1="opt1">
    <ul>
        <li class="cbp-item">
            <img src="path/to/img1.png">
        </li>
        <li class="cbp-item">
            <img src="path/to/img2.png">
        </li>
    </ul>
</div>

要让<ul>标记填充API调用的数据，我使用ng-repeat指令构建列表。

<div myDirective myPluginOpt1="opt1">
    <ul>
        <li class="cbp-item" ng-repeat="item in items">
            <img src="path/to/imgX.png">
        </li>
    </ul>
</div>

但不幸的是，在Angular进程内部ng-repeat指令之前调用了jQuery插件，因此只渲染了第一个项目。 如何确保在处理完所有内部HTML后调用myDirective中的jQuery插件？

我知道我可以编写另一个自定义指令来处理ng-repeat的$ last事件并将其发送给父级，但我希望myDirective完全独立于其HTML内容。

Answer 1

不使用仅调用一次且在任何绑定发生之前的编译函数，最好使用每次将元素绑定到$ scope对象中的数据时调用的链接函数。您还需要向表示列表的范围对象添加$ watch。也许是这样的（未经测试）：

＆＃13;

angular.module('myModule')
     .directive('myDirective', function ($timeout) {
        return {
            restrict: 'A',
            scope: {
                items: '='
            },
            link: function(scope, element, attrs) {
                scope.$watch('items', function(newValue) {
                   if (newValue && newValue.length>0) {
                       element.myPlugin({
                            myPluginOpt1: attrs.myPluginOpt1,
                            myPluginOpt2: attrs.myPluginOpt2,
                            ...
                        });
                   }
                })
            }
        }
    });

＆＃13;

手表会监听列表中的更改，这里的想法是仅在列表包含元素时才启用插件。让我知道它是否有效！

此致丹尼尔

在Angular内部执行DOM之后执行指令

1 个答案: