如何编译angularjs中第三方库添加的DOM?

时间:2013-09-25 14:07:00

标签: angularjs angularjs-directive angularjs-scope

我正在使用带有角度的sidr(http://www.berriart.com/sidr/)作为导航栏。 sidr所做的是复制我的导航栏标记并将其放在包裹在其自定义div中的正文之前。

现在我在导航栏上定义了一个指令,它看起来像这个<ul filter>....</ul>。由于sidr正在复制我的导航栏标记,因此我有2个带过滤器指令的ul。但是我的指令的链接函数只被调用一次,因为角度剂量不知道该指令的另一次出现。

我的标记看起来像这样

            <ul class="side-nav nested-nav" filter>
                <li class="has-sub-menu" ng-repeat="filter in filters">
                    <a href="#" ng-bind="filter.label"></a>
                    <ul class="sub-menu" options>
                        <li ng-repeat="option in filter.options">
                            <a href="#" ng-bind="option.label"></a>
                        </li>
                    </ul>
                </li>
            </ul>

我的指示

angular.module('test')
    .directive('filter', function() {
        return {
            link: function($scope, iElement, iAttrs) {
                console.log('hello world!'):
            }
        }
    })

那么如何告诉angular编译由sidr添加的第二个<ul filter>....</ul>以及何时?

1 个答案:

答案 0 :(得分:0)

我还没有使用过这个jQuery插件。但是看一下这个文档,它有这个回调功能:

    $('#callback-menu').sidr({
      name: 'sidr-callback',
      source: function(name) {
        return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
      }
    });

所以我猜你可以将自己的html模板放入源回调和$compile