angular.js $scope 未附加到外部指令中的表单答案

【问题标题】：angular.js $scope not attaching to form in external directiveangular.js $scope 未附加到外部指令中的表单
【发布时间】：2016-09-12 05:51:09
【问题描述】：

我正在开发一个 Angular 应用程序。现在我们有这些指令，它们是引导您完成长向导表单的面包屑。我遇到的一个问题是，如果您在表单的某个部分有错误并单击面包屑返回，它不会让您在整个表单中继续前进（下一个按钮会中断）。所以解决这个问题（我相信）是不要让你点击这些面包屑，除非表单没有任何错误。

这些面包屑在指令中。如何从此外部指令访问表单？我试过了：
$scope.competitionCreateForm
$scope.$competitionCreateForm
competitionCreateForm.$error
等，似乎没有任何工作。但是，当我console.log competitionCreateForm 时，我确实看到了实际的表单对象，所以我知道该部分正在工作。

这是指令的样子（coffeescript）

angular.module('App').directive 'breadcrumb', [
  'WizardHandler'
  (WizardHandler) ->
    {
      restrict: 'E'
      scope:
        breadcrumbs: '=breadcrumbs'
        placeholder: '@'
      templateUrl: 'directives/templates/breadcrumbs.html'
      #require: ''

      controller: ['$scope', ($scope) ->
      # checking right here
        $scope.goToStep = (step) ->
          $scope.currentStepValid = true 
          WizardHandler.wizard().goTo(step)
      ]
    }
]

我查看了其他答案，但似乎没有用。当我第一次创建表单时，也许我需要添加一些东西，但我不确定。有谁知道如何通过外部指令检查表单对象的状态？

【问题讨论】：

标签： angularjs coffeescript

【解决方案1】：

因此，通过在指令上使用 scope 属性，您正在为指令创建一个独立的作用域，这意味着该指令无法访问父指令的作用域。

如果您希望继续使用隔离作用域，您有两种选择：

您可以像使用 breadcrumbs 一样使用两种方式绑定。
另一种选择是使用单向绑定，即'<' 将表单状态传递给您的指令。这将在该属性更改时更新指令，就像双向绑定将但不允许从指令修改表单一样。

【讨论】：

非常感谢您的回答。你会碰巧有一个如何做到这一点的例子吗？

【解决方案2】：

我可以通过添加来完成这项工作

scope:
  breadcrumb: '=breadcrumbs'
  placeholder: '@'
  form: '?=form'

增加了向面包屑指令添加表单的能力

breadcrumb[breadcrumb='breadcrumb' form='createForm']

【讨论】：