Question

我正在努力将一个jQuery插件移植到AngularJS，因为它似乎很有趣。在过去，当使用jQuery时，我使用jQuery来操作DOM。所以，我在jQuery中有一个函数来加载插件，并且该函数是manuplating DOM。

现在，在使用AngularJS时，我已经读到directives用于特定目的，但我没有设法找到解决方案。

我有以下html：

<body class="officeui-space-no-margin officeui-space-no-padding">
    <!-- Defines the OfficeUI section. In this section, all the contents for the OfficeUI user interface will be written. -->
    <div ng-controller="OfficeUIController" id="OfficeUI">
        <div class="title officeui-align-center">
            <span>Here the title can go.</span>
        </div>

        <!-- Defines the main holder for the ribbon. -->
        <div id="ribbonHolder">
            <!-- Render the template for the ribbon. -->
            <ng-include src="'Partials/Templates/Ribbon/tabs.html'"></ng-include>
        </div>
    </div>

    <!-- Bottom scripts: Used for Initialization. -->
    <script type="text/javascript">
        // Initialize the 'ribbonHolder' element as a ribbon.
        $('#ribbonHolder').ribbon();
    </script>
</body>

您在这里看到我正在加载要渲染的模板，其内容可以在下面找到：

<ul role="tablist" class="officeui-space-no-margin officeui-space-no-padding">
    <!-- Render all the tabs in the collection. -->
    <tabs-container>
        <li role="tab" class="officeui-display-inline-block officeui-align-center" ng-repeat="tab in tabs">{{tab.Name|tabs}}</li>
    </tabs-container>
</ul>

在上面的模板中，我确实有一个元素tabs-container，它应该是我的指令。我定义了AngularJS的JavaScript，包括注册这个指令：

var officeUIApplication = angular.module('OfficeUI.Ribbon.Controllers', []);
officeUIApplication.directive('tabsContainer', function() {
    var functionLink = function(scope, element, attrs) {
        console.log(element.children());
    };

    return {
        restrict: 'E',
        link: functionLink
    };
});

根据我对AngularJS的非常有限的了解，我只是学习它，它在变量functionLink中，我应该操作附加事件处理程序的DOM到特定部分。

但在functionLink内，我调用以下代码：

console.log(element.children());

但是在控制台中我确实看到这个特殊元素是空的。为什么会这样，这是一个好方法吗？

我采用的另一种方法是在jQuery中包含一些内容，以便代码只在AngularJS完成它的工作后执行，但我不喜欢这个特定的想法，另一方面，我如何创建一个传递选项和事件处理程序的jQuery插件，或者不再可能，我实际上是在创建一个AngularJS插件？

感谢您的回复。

Answer 1

试试这个：

officeUIApplication.directive('tabsContainer', function($timeout) {
    var functionLink = function(scope, element, attrs) {
         $timeout(function() { 
              element.ribbon();
         });
    };

    return {
        restrict: 'E',
        link: functionLink
    };
});

jQuery插件通常需要DOM准备好才能正确初始化。在角度方面，没有真正的DOM准备概念。 $ timeout在渲染阶段之后执行，这就是它工作的原因。

AngularJS，指令元素为null

1 个答案: