3

テンプレートを持つディレクティブを作成しようとしています。テンプレートは、取得したいいくつかの 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/

4

2 に答える 2

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>',        
    }        
});
于 2012-12-07T21:19:08.960 に答える
1

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 はまだ繰り返しを開始していません。これが、それに対応するためにコードの一部を移動することを提案している理由です。

于 2012-12-07T22:05:07.487 に答える