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

我想做的事情如下：

<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？

函数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.html());
        });
    };
});

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

原文链接：https://www.f2er.com/angularjs/142182.html

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

猜你在找的Angularjs相关文章