angular-wizard: Illegal use of ngTransclude directive in the template

StackOverflow https://stackoverflow.com/questions/22567587

  •  19-06-2023
  •  | 
  •  

Question

I'm trying to use angular with breeze and angular-wizard. I'm having issue with angular-wizard: 

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div class="steps" ng-transclude="">
http://errors.angularjs.org/1.2.14/ngTransclude/orphan?p0=%3Cdiv%20class%3D%22steps%22%20ng-transclude%3D%22%22%3E
    at http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:78:12
    at ngDirective.link (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:20343:35)
    at nodeLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:6311:13)
    at compositeLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:5722:15)
    at compositeLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:5725:13)
    at publicLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:5627:30)
    at link (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular-route/angular-route.js:916:7)
    at nodeLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:6311:13)
    at compositeLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:5722:15)
    at publicLinkFn (http://localhost:63342/Breeze-Angular-Meetup-20130312-master/bower_components/angular/angular.js:5627:30) <div class="steps" ng-transclude=""> angular.js:9509:24
  (anonymous function)  angular.js:9509:24
  (anonymous function)  angular.js:6950:18
  nodeLinkFn    angular.js:6314:13
  compositeLinkFn   angular.js:5722:15
  compositeLinkFn   angular.js:5725:13
  publicLinkFn  angular.js:5627:30
  link  angular-route.js:916:7
  nodeLinkFn    angular.js:6311:13
  compositeLinkFn   angular.js:5722:15
  publicLinkFn  angular.js:5627:30
  boundTranscludeFn angular.js:5741:21
  controllersBoundTransclude    angular.js:6332:18
  update    angular-route.js:866:25
  Scope.$broadcast  angular.js:12354:28
  (anonymous function)  angular-route.js:548:26
  wrappedCallback   angular.js:11046:81
  wrappedCallback   angular.js:11046:81
  (anonymous function)  angular.js:11132:26
  Scope.$eval   angular.js:12075:28
  Scope.$digest angular.js:11903:31
  Scope.$apply  angular.js:12179:24
  (anonymous function)  angular.js:9298:22
  jQuery.event.dispatch jquery.js:4371:9
  elemData.handle   jquery.js:4057:28

Here is my index.html:

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body ng-app="app">
    <div class="header">
  <ul class="nav nav-pills pull-right">
    <li class="active"><a ng-href="#">Help</a></li>
    <li><a ng-href="#">FAQ</a></li>
    <li><a ng-href="#">Contact</a></li>
  </ul>
  <h3 class="text-muted">AppWizard</h3>
</div>
    <div class="container" ng-view=""></div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>

    <script src="http://sampleservice.breezejs.com/scripts/q.min.js"></script>
    <script src="http://sampleservice.breezejs.com/scripts/breeze.min.js"></script>
    <script src="http://sampleservice.breezejs.com/scripts/plunkerHelpers.js"></script>



        <script  src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
        <link rel="stylesheet" type="text/css" href="bower_components/angular-wizard/dist/angular-wizard.css">
        <script src="app.js"></script>
        <script src="model.js"></script>
        <script src="datacontext.js"></script>
        <script src="main.js"></script>
        <script src="wizard.js"></script>
        <script src="http://sampleservice.breezejs.com/scripts/ngLogger.js"></script>
</body>

Here is my app.'s:

var app = angular.module('app', ['ngRoute','mgo-angular-wizard']);

app.value('host', false /*use local host*/ ?
          "http://localhost:63428" :
          "http://sampleservice.breezejs.com");



app.controller('MainCtrl',
['$scope', 'logger', 'datacontext','$timeout',
function($scope, logger, datacontext, $timeout) {
    logger.log('created MainCtrl');
    $scope.items = [];
    $scope.logList = logger.logList;
    $scope.lastLog = function(){return logger.lastLog;};
    $scope.searchText = "";
    $scope.$watch('searchText', delayedSearch);
    $scope.stayLocal = false;
    $scope.$watch('stayLocal', function(newVal, oldVal) {
      if (newVal !== oldVal) { // if not init phase
        getItems();
      }
    });

    getItems();

  /***  supporting functions ***/
  var oldSearchText;

  // wait until user stops typing (searchText === oldSearchText)
  function delayedSearch(newVal, oldVal){
    if ($scope.searchText === oldSearchText)  {
      getItems();
      oldSearchText = null;
    } else if (newVal !== oldVal) { // if not init phase
      oldSearchText = newVal;
      $timeout(delayedSearch, 800);
    }
  }

  function getItems() {
    datacontext.getItems($scope.searchText, $scope.stayLocal)
               .then(success)
               .fail(failed)
               .fin(refreshView);
  }
  function success(data) {
      $scope.items = data;
  }
  function failed(error) {
      $scope.errorMessage = error.message;
  }
  function refreshView() {
      $scope.$apply();
  }
}]);



app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'main.html',
                controller: 'MainCtrl'
            })
            .when('/wizard', {
                templateUrl: 'wizard.html',
                controller: 'WizardCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

Here is my main.html:

<div class="jumbotron">
  <p class="lead">
    <img src="wizard.jpg"><br/>
    {{appDescription}}
  </p>
  <p><a class="btn btn-lg btn-success" ng-href="#/wizard">Begin</a></p>
</div>

<div class="row marketing">

</div>

<div class="footer">
  <p>

  </p>
</div>

And here is my wizard.html:

<div>
 {{wizardPageMessage}}
<wizard on-finish="finished()">
    <wz-step title="Step 1">
        <h1>This is Step 1</h1>
        <!--<ng-include src="'step1.html'"></ng-include>-->
        <br/>
        <input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step" />
    </wz-step>
    <wz-step title="Step 2">
        <h1>This is Step 2</h1>
        <p>Need to dynamically insert a form here</p>
        <input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step" />
    </wz-step>
    <wz-step title="Step 3">
    <h1>This is Step 3</h1>
        <p>Even more steps!!</p>
        <input type="submit" class="btn btn-primary" wz-next value="Finish now" />
    </wz-step>
</wizard>
</div>

I'm not trying to use any templates (at least not explicitly), so I have no idea how to resolve this. Perhaps, someone has seen this before...

Was it helpful?

Solution

It looks like had some of my declarations were messed up. After doing some cleaning, seems to be working now.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top