Question

我有一个在Angular编译指令之前执行的控制器。控制器需要操作在编译指令后才存在的DOM元素。如果DOM元素不在DOM中，我怎样才能选择那个DOM元素来操纵它？

一个人为的例子来说明这一点。假设我有以下标记：

<div ng-controller="CustomerCtrl">
    <div customer-list></div>
</div>

customerList是一个转换为：

的指令

<select class="customer-list">
    <option value="JohnDoe">John Doe</option>
    <option value="JaneDoe">Jane Doe</option>
</select>

CustomerCtrl看起来像：

.controller('CustomerCtrl', function() {
    var customerList = angular.element('[customer-list]'),
        firstCustomer = customerList.children('option:first');

    // firstCustomer is length === 0 at this point, so
    // this code does not work
    firstCustomer.prop('selected', 'selected');
});

我的解决方案是这样做：

.controller('CustomerCtrl', function($timeout) {
    var customerList = angular.element('[customer-list]');

    // this works
    $timeout(function() {
        customerList.children('option:first').prop('selected', 'selected');
    });
});

我想知道的是，这是使用$timeout()的合适方法吗？有关于此的最佳做法吗？

Answer 1

您应该使用指令的link函数来执行此类操作。那你就不会有超时使用了。这种DOM操作实际上属于指令而不是控制器。控制器只是范围的持有者，实际上不应该有很多应用程序/ ui逻辑。保证在编译指令后调用该链接，这样如果使用链接就应该很好。

从控制器访问尚未编译的指令的DOM元素

1 个答案: