angular-wizard：在模板中非法使用ngTransclude指令

时间：2014-03-21 19:13:04

标签： javascript angularjs 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

这是我的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>

这是我的应用程序。

：

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: '/'
            });
    });

这是我的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>

这是我的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>

我没有尝试使用任何模板（至少没有明确说明），所以我不知道如何解决这个问题。 也许，某人之前已经看过这个......

1 个答案:

答案 0 :(得分：0)

看起来我的一些声明搞砸了。做了一些清洁后，似乎现在正在工作。

相关问题
最新问题