James N James N - 11 months ago 53
AngularJS Question

angular.js $scope not attaching to form in external directive

I am working on an angular app. right now we have these directives that are breadcrumbs that guide you through long wizard forms. One of the problems I have run into is if you have an error in one part of the form and click on a breadcrumb to go back, it doesnt let you progress throughout the form (the next button breaks). So the solution to this (I believe) is to not let you click on these breadcrumbs unless the form doesn't have any errors.

These breadcrumbs are in directives. How can I access the form from this external directive? I have tried:




etc and nothing seems to work. However, when I
console.log competitionCreateForm
I do see the actual form object, so I know that part is working.

Here is what the directive looks like (coffeescript)

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

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

I have looked through other answers and it hasn't seemed to work. maybe I need to add something when I'm first creating the form, but I'm not sure. Does anyone know how I can check the status of my form object from an external directive?

Answer Source

I was able to get this working by adding

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

which adds the ability to optionally add a form to the breadcrumb directive

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