8

私は次のようなことをしたいと思います:

<div class='row' ng-repeat='row in _.range(0,12)'>
    <div id='{{row}}'></div>
</div>

しかし、コントローラーで私が試すとき：

function SetterForCatanCtrl($scope) {
    $scope._ = _;
    try {
        var tile = document.getElementById('5');
        tile.style.backgroundImage = "url('aoeu.png')";
    } catch (e) {
        alert(e)
    }
}

getElementByIdnull を返すので、AngularJS 変数を使用して要素の ID を設定するにはどうすればよいですか?

4

1 に答える 1

14

この関数は、angular がアプリのブートストラップ中にディレクティブにSetterForCatanCtrl遭遇したときに 1 回だけ実行されます。ngControllerこれが発生すると、DOM からアクセスしたい要素がまだ存在しません。

コントローラーから DOM 操作を行うことはお勧めできません。ディレクティブは、直面している種類の問題を解決できます。あなたのユースケースは CSS とクラスを切り替えるだけで解決できますが、背景画像を設定するだけでなく、それ以上のことをしたいと思います。

コントローラーからの DOM 操作

カスタム ディレクティブを要求していないため、ngClick ディレクティブを使用して画像を切り替えることができるメソッドを呼び出す簡単な解決策を実行できます。

HTML の例

<div ng-controller='ctrl'>
    <div class='row' ng-repeat='row in _.range(0,12)'>
        <div id='{{row}}' ng-click="click($index)">
            <button>{{row}}</button>
        </div>
    </div>
</div>

そしてJS

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

App.run(function($rootScope) {
  $rootScope._ = _;
});

App.controller('ctrl', function($scope){
    $scope.click = function(idx){
        var elem = document.getElementById(idx);
        console.log('clicked row', idx, elem);   
    };
​});    ​

そのため、ボタンがクリックされると ID が取得され、それを使用して DOM から要素が取得されます。しかし、繰り返しますが、このユースケースでは、ディレクティブがより良い選択です。

JSFiddle: http://jsfiddle.net/jaimem/3Cm2Y/

pd: jQuery をロードするangular.element(<selector>)と、DOM から要素を選択するために使用できます。

編集: ディレクティブの例を追加する

ディレクティブからの DOM 操作

ディレクティブが適用される要素にイベントをバインドするだけでよいため、ディレクティブを使用する方が簡単です。

HTML

<h1>Directive</h1>
<div class='row' ng-repeat='row in _.range(0,12)'>
    <div id='{{row}}' my-directive>
        <button>{{row}}</button>
     </div>
</div>

JS

App.directive('myDirective', function(){
    return function(scope, element, attr){
        element.bind('click', function(){        
            console.log('clicked element: ', element, element.html());
        });
    };
});

http://jsfiddle.net/jaimem/3Cm2Y/1/

于 2012-12-05T08:04:25.987 に答える