Question

尝试通过angularJs中的Id获取元素，然后为其添加一个类。我已经使用“ ng-attr-id ”为我的元素分配id，现在无法将addClass分配给它。

HTML：

<div ng-attr-id= {{id}} >Text</div>
<button ng-click="action">action</button>

脚本：

  $scope.id="name";

  $scope.action=function(){
  angular.element($document[0].getElementById("name")).addClass("alllign");
  }

the plunkr：http://plnkr.co/edit/VjORCl5xoHQZbzBG6HDp?p=preview

PS：除了使用ng-class之外的任何其他解决方案将更受欢迎。根据我当前的问题我不需要那个

Answer 1

通过进行一些小的更改，您的代码将起作用。虽然我的偏好通常是像其他人在上面提到的那样使用ng-class。

Controller.js

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

app.controller('Ctrl', function($scope) {
    $scope.id="name";

    $scope.action=function(){
      // Angular Element can select by id directly but you just need to add the #
      angular.element('#name').addClass("alllign");
    };
});

的index.html

<!-- id can simply be set but you need the quotes -->
<div id='{{id}}'>Text</div>
<!-- Missing parenthesis on function call -->
<button ng-click="action()">action</button>

查看plunker

Answer 2

我可以建议您使用ng-class函数来管理元素上的类吗？

<div ng-class="{alllign: clicked}">Text</div>
<button ng-click="clicked=!clicked">action</button>
<script>
    var app = angular.module('myApp', [])
    app.controller('Ctrl', function($scope){
        $scope.id="name"
        $scope.clicked=false
    })
</script>

plunker：http://plnkr.co/edit/GIYbaDnpAugF1ll3fE5C?p=preview

ng-class得到评估，变量真实，这些类会自动添加到元素中。

Answer 3

使用ng-class会更有意义，而不是使用.addClass方法

<div ng-attr-id= {{id}} ng-class="{align: align}">Text</div>
<button ng-click="align=true">action</button>

在angularjs中通过Id和addClass获取元素

3 个答案: