javascript - 在 Angular 上，如何通过模板内的括号表示法访问对象属性？

Question

我正在创建一个自定义指令以通用方式显示表单错误(使用 ng-messages)。该指令将通过以下方式调用:

<show-errors form="login_form" field="email"></show-errors>
...
<show-errors form="login_form" field="password"></show-errors>

指令声明:

function showGenericErrors() {
  return {
    restrict: 'E',
    templateUrl: 'views/error.dir.tmpl.html',
    replace: true,
    scope: {
      form: '@',
      field: '@'
    },
    transclude: true,
    link: function (scope, element, attrs, ctrl, transclude) {
      scope.theForm = scope.$parent[attrs.form];
      transclude(scope, function (clone, scope) {
        element.append(clone);
      });
    }
  };
}

它的模板:

<div>
  <!-- Here I can access form property via bracket notation -->
  <!-- {{theForm[field].$blurred }} -->

  <!-- But here I cannot use the same notation inside ng-if -->
  <div class="error" ng-if="theForm[field].$blurred" ng-messages="theForm[field].$error" ng-messages-include="views/errors.html">
  </div>
</div>

模板不起作用!

因为我将在多个表单和字段上使用此指令，我该如何验证指令模板中的条件。或者有更好的方法来处理这个问题吗？

Answer 1

已解决!

新指令:

function showErrors() {
  return {
    restrict: 'E',
    templateUrl: 'views/error.dir.tmpl.html',
    replace: true,
    scope: {
      form: '@',
      field: '@'
    },
    link: function(scope, element, attrs, ctrl) {
      scope.theForm = scope.$parent[attrs.form];
      scope.formField = scope.theForm[attrs.field];
    }
  };
}

新模板:

<div>
  <div class="error" ng-if="formField.$blurred" ng-messages="formField.$error" ng-messages-include="views/errors.html">
  </div>
</div>