一尘不染

如何在AngularJS中设置重复的元素ID？

angularjs

我想做类似的事情：

<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)
    }
}

getElementById 返回null，那么如何使用AngularJS变量设置元素的ID？

阅读 200

2020-07-04

共1个答案

一尘不染

SetterForCatanCtrl当angular
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>

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/

2020-07-04