AngularJS 指令 - 等待指令模板完成渲染？答案

【问题标题】：AngualarJS Directives - Waiting for a directive template to finish rendering?AngularJS 指令 - 等待指令模板完成渲染？
【发布时间】：2012-12-08 06:05:07
【问题描述】：

我正在尝试编写一个具有模板的指令。该模板正在呈现我想要检索的一些 DOM 元素。但是，当我尝试在链接函数中检索我的 DOM 元素时，找不到 DOM 元素。如果我在选择找到的元素之前添加一个 window.setTimeout 方法。如何在链接函数中尝试操作 DOM 之前等待模板完成渲染？

这是我正在尝试做的指令代码：

module.directive('testLocationPicker', function() {

    var linkFn = function(scope, element, attrs) {
        console.log('in linking function');
        window.setTimeout(function() {
            var positions = $('.position');
            console.log('number positions found: ' + positions.length);
            positions.click(function(e) {
                console.log('position clicked');
                scope.$apply(function() {
                     scope.selectedPosition = $(e.currentTarget).html();
                });
            });
        }, 500);
    };

    return {
        link: linkFn,
        restrict: 'E',        
        template: 'Choose a position: <div class="position" ng-repeat="position in positions">{{position}}</div>',        
    }        

});

我有一个我想要做的事情的 JS Fiddle：http://jsfiddle.net/bdicasa/XSFpu/42/

【问题讨论】：

标签： angularjs

【解决方案1】：

我建议改为这样做：

var module = angular.module('test', []);

module.controller('TestController', function($scope) {
    $scope.positions = [
        'Test Position 1',
        'Test Position 2',
        'Test Position 3'    
    ];

    $scope.selectedPosition = '';

    $scope.handleClick = function (index) {
        $scope.selectedPosition = $scope.positions[index];
    }
});        

module.directive('testLocationPicker', function() {    
    return {
        restrict: 'E',        
        template: 'Choose a position: <div class="position" ng-repeat="position in positions" ng-click="handleClick($index)">{{position}}</div>',        
    }        
});

【讨论】：

虽然这是有道理的，但我仍然不明白为什么我的点击处理程序没有在链接函数中注册？我认为在链接函数中访问 DOM 应该是安全的？
在链接函数中访问 DOM 元素是安全的，但正如 Macked 所说，ng-repeat 还没有真正运行。您可以通过修改
好的，有道理。只是好奇你是否知道一旦 ng-repeat 完成后指令中触发的事件处理程序？

【解决方案2】：

不要尝试搜索 dom 并添加点击事件，只需像这样修改您的模板：

 template: 'Choose a position: <div class="position" ng-repeat="position in positions" data-ng-click="positionClick($index)">{{position}}</div>',

然后在链接函数中创建一个positionClick函数：

var linkFn = function(scope, element, attrs) {
    scope.positionClick = function(index){
     scope.selectedPosition = index;   
    }
};

工作 jsFiddle：http://jsfiddle.net/XSFpu/77/

您的方法不起作用的原因是模板加载后没有触发 ng-repeat。所以它加载了指令，并且链接功能已经被击中，但 ng-repeat 实际上还没有开始重复。这就是为什么我建议移动你的一些代码来适应它。

【讨论】：