2

我正在学习教程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>

结果

4

1 回答 1

5

在这个函数中：

link: function (scope, element)

element是你的容器 div，并且element.children(1)不接受选择器，所以它会得到所有的孩子。从angular.element。尝试：

element.children().eq(1)

或者

element.find("div")
于 2013-08-24T04:20:09.027 回答