Angular的子视图

时间:2013-12-05 17:30:52

标签: javascript angularjs angularjs-routing

所以我试图在模板中渲染子视图,但我想在点击元素时定义子视图控制器内部的状态。将其从主控制器中分离出来的原因是我将在初始子视图中进行子视图。

但是,我收到以下错误:

  

错误:[$ injector:modulerr]无法实例化模块   ivy.quote.controllers.durationCtrl由于:TypeError:无法读取   属性'navigable'未定义

在我点击基本上执行以下操作的按钮之前会发生这种情况

$state.transitionTo('quote.duration');

quote.tpl.html

<div class="quote grid" disable-scroll>
  <div modal-from-bottom modal-hidden="calendarHide"
    modal-content-class="quote__keypad" modal-speed="200" ui-view></div>
</div>

quoteCtrl.js

angular.module('ivy.quote.controllers.quoteCtrl', [
    'ivy.quote.controllers.keypadCtrl',
    'ivy.quote.controllers.durationCtrl',
    'ivy.quote.services.quoteManager',
    'ui.router',
    'ivy.quote.calendar',
    'wn.keypad',
    'wn.gesture.disableScroll'
  ])

/**
 * Configure UI Router
 */
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('quote', {
      url: '/quote',
      controller: 'quoteCtrl',
      templateUrl: 'quote/templates/quote.tpl.html'
    });
  }])

  .controller('quoteCtrl', ['$scope', '$timeout', '$state', 'quoteManager',
    function ($scope, $timeout, $state, quoteManager) {
}]);

duration.tpl.html

<div class="quote__calendar">
  <h2>DURATION</h2>
  <div ui-view></div>
</div>

durationCtrl.js

angular.module('ivy.quote.controllers.durationCtrl', [
  'ui.router'
])

 .config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('quote.duration', {
    url: '/duration',
    controler: 'durationCtrl',
    templateUrl: 'quote/templates/duration.tpl.html'
  });
}])

 .controller('durationCtrl', ['$scope', function ($scope) {
  console.log('durationCtrl', $scope);
}]);

1 个答案:

答案 0 :(得分:1)

您的控制器应拼写为&#34;控制器&#34;而不是&#34;控制器&#34;,否则,这看起来就像我在子视图中看到的所有教程。