Question

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

result

Answer 1

在此功能中：

link: function (scope, element)

element是您的容器div，element.children(1)不接受选择器，因此它将获取所有子项。来自angular.element。尝试：

element.children().eq(1)

或者

element.find("div")

angular.element.addClass有线

1 个答案: