如何将隔离作用域与组件和指令一起使用？

Question

这里的目标是让 MainCtrl 知道何时在指令中发现错误。错误必须显示在这里：

<div ng-if="errors[0]">Error 1: {{errors[0]}}</div>

如何使用组件内的指令获得隔离作用域？如果您取消注释下面提到的 2 行，则以下应用程序有效。事实上，我得到错误：

我能读懂原因。我需要知道如何解决这个问题，同时仍然允许指令具有独立的范围。我可能在一个页面上有 3-4 个这样的指令，每个指令都需要它自己独特的 errors 也可供父级使用。

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

app.controller('MainCtrl', function($scope) {
  $scope.errors = [false, false];
  $scope.text = "bobby";
});
 
app.directive('testDirective', function(){
  return {
   restrict: 'A',
    scope: {
      errors: '=',
      text: '@'
   },
    link: function($scope, $element, $attr, ngModel) {
      console.log('link fired');
      console.log('errors: ', $scope.errors);
      console.log('scope.text', $scope.text);

      $attr.$observe('text', function (val) {
        if($scope.text === 'bobby'){
          $scope.errors[0] = true;
        }else{
          $scope.errors[0] = false;
        }
      });
    },
   template: '<p>text: {{ text }} </p>'
     + '<p>errors: {{errors}}</p>'
     + '<p><input type="text" ng-model="errors" /></p>'
  };
});


app.component('panel', {
  bindings: {
  },
  template: [
    '<div>',
    '</div>'
  ].join(''),
  controller: function() {
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<section ng-app="app" ng-controller="MainCtrl">
  <h3>Parent Scope</h3>
  <p>errors: {{errors}}</p>
  <input type="text" ng-model="text"></div>
  <div ng-if="errors[0]">Error 1: {{errors[0]}}</div>
  <div ng-if="errors[1]">Error 2: {{errors[1]}}</div>

<!--  UNCOMMENT THE FOLLOWING 2 LINES AND THIS APP WILL WORK
  <h3>Directive by itself</h3>
  <div test-directive text="{{text}}" errors="errors"><div>
  -->
    
  <h3>Directive in component</h3>
  <panel test-directive text="{{text}}" errors="errors"></panel>
  
</section>

Answer 1

经过研究，我注意到 Angular 只有 returns 来自 $validators 的布尔值（而不是 object）。在这一点上，我认为我的方法是错误的。我决定为每个唯一的错误消息创建一个唯一的 $valiators。然后使用 ng-message 作为输出。

为了在同一页面上使用多个组件，我还必须检查 ngModel.$error 作为验证的一部分。 This blog 涵盖了基本方法。

如何将隔离作用域与组件和指令一起使用？

How can I use isolated scope with a component and a directive?

angularjs

angular-directive

angular-components