angular.element.addClass有线

Pay*_*Chu 2 javascript directive class angularjs

我正在从教程EggHead angular.element学习并遵循它来创建测试脚本.但是我的angular.element的行为与教程不同.toggleClass或addClass将"class"添加到"input"和"div".见下面的剧本和图片.这是一个错误吗?或者我错过了什么?

<html ng-app="app">
  <head lang="en">
    <meta charset="utf-8" />
    <title>Debug</title>
    <link rel="stylesheet" href="/css/foundation.css" />
  </head>
  <body>
    <dumb-password></dumb-password>
    <script src="/js/angular-1.2.0rc1/angular.js"></script>
    <script>
    angular.module('app', [])
    .directive('dumbPassword', function () {
      return {
        restrict: 'E',
        replace: true,
        template: '<div><input type="text" ng-model="model.input"><div>{{model.input}}</div></div>',
        link: function (scope, element) {
          scope.$watch('model.input', function (value) {
            if (value === 'password') {
              element.children(1).toggleClass('alert-box alert')
            } else {
              element.children(1).removeClass('alert-box alert')
            }
          })
        }
      }
    })
    </script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

结果

Kha*_* TO 5

在这个功能:

link: function (scope, element)
Run Code Online (Sandbox Code Playgroud)

element是你的容器div,并且element.children(1)不接受选择器所以它将获得所有的孩子.来自angular.element.尝试:

element.children().eq(1)
Run Code Online (Sandbox Code Playgroud)

要么

element.find("div")
Run Code Online (Sandbox Code Playgroud)