javascript - JS 无法更改 className

Question

我正在尝试更新 div#programmation 的第一个子级的类

<div id="programmationEtat">
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   ...
</div>

我尝试过:

var children = document.getElementById("programmationEtat").children;
console.log(children);
children[0].className = 'active';
console.log(children);

第一个控制台日志显示:

tab-pane ng-scope

第二个说:

active

但是什么都没有改变，当我查看 HTML(chrome 调试器)时，我仍然有

<div class="tab-pane ng-scope"> 

我做错了什么？! 预先感谢您!

编辑: 我发现了问题: 我在包含此 div 的范围上使用动态指令:

   app.directive('dynamic', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function (html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
}]);

我有

$scope.programmation='...<div id="programmationEtat">
       <div class="tab-pane ng-scope">...</div>
       <div class="tab-pane ng-scope">...</div>
       <div class="tab-pane ng-scope">...</div>
       ...
    </div>...'

HTML:

<div dynamic="programmation" id="programmationEtat">
    ... 
</div>

看起来使用 document.getElementById(...) 更新 $scope.programmation 中包含的内容是不可能的，必须直接更新 $scope.programmation 。

为了解决我的问题，我使用了替换函数($scope.programmation.replace(...))!

Answer 1

使用 ng 类:

<div id="programmationEtat">
   <div ng-class="className"class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
</div>

$scope.className = 'active';

或者:

<div id="programmationEtat">
   <div ng-class="{ 'active': activated }"class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
   <div class="tab-pane ng-scope">...</div>
</div>

$scope.activated = true;