Question

我有一个包含多个部分的表单，如果其中的任何字段具有某个类，我想将该类应用于该部分。

我的想法是在部分中查看has-error类的任何字段，并在部分标题中显示图标或其他内容。

每个字段都使用ng-class="{'has-error': !value, 'has-success': value}"设置其类，看起来更新类的顺序以及$watch事件触发导致问题。

我在这里设置了一个plunkr：https://plnkr.co/edit/1isq3DXXUvSPW5ChYkuM?p=preview

尝试删除并在输入中输入值，您将看到父类不是“同步”。

HTML：

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="font-awesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="bootstrap-js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <sws-form-section>
      <sws-form-field label="Test"></sws-form-field>
    </sws-form-section>
  </body>

</html>

JavaScript的：

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

module.directive('swsFormSection', function() {
    return {
      link: function($scope, element) {
        $scope.$watch(function() {
          var errors = element.find('.has-error').length;
          console.log('outer:' + errors);
          return errors;
        }, function(value) {
          $scope.hasAnyErrors = value;
        });
      },
      transclude: true,
      template: '<div><label ng-class="{\'text-danger\': hasAnyErrors, \'text-success\': !hasAnyErrors}">Errors In Section: {{hasAnyErrors}}</label><div ng-transclude></div>'
    };
  });

module.directive('swsFormField', function() {
  return {
    link: function($scope, element) {
      $scope.value = 'testar';

        $scope.$watch(function() {
          var errors = element.find('.has-error').length;
          console.log('inner:' + errors);
          return errors;
        }, function(value) {
          console.log('the value:' + $scope.value);
        });
    },
    template: '<div class="form-group" ng-class="{ \'has-error\': !value, \'has-success\': value }"><label class="control-label">Test</label><input type="text" class="form-control" ng-model="value"></div><pre>{{value|json}}</pre>'
  }
});

Answer 1

根据Daniel Becks的建议：

我的答案是“不要那样做”。一般来说，你会好得多在Angular中观察数据模型，而不是观察DOM。

我选择使用已经存在的ng-valid类，并将每个部分作为单独的表单，将表单发布到作用域并使用表单中的表单。$ valid属性。

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

module.directive('swsFormSection', function() {
    return {
      transclude: true,
      template: '<form name="formSection"><i class="fa" ng-class="{ \'fa-check\': formSection.$valid, \'fa-pencil\': formSection.$invalid }"></i> My Section:<div ng-transclude></form>'
    };
  });

module.directive('swsFormField', function() {
  return {
    template: '<div class="form-group"><label class="control-label">Test</label><input type="text" required class="form-control" ng-model="value"></div><pre>{{value|json}}</pre>'
  }
});

更新了plunkr：specifications

如果任何子元素具有某个类，则将类应用于父级

1 个答案: