Question

我是棱角分明的新人，我即将在jsfiddlle写下我的第一个hello world App。我设法使用ng-include加载内容但我仍然遇到使用ngRoute的问题：我得到了

无法读取属性＆＃39; insertBefore＆＃39;未定义的

在以下代码中：的 HTML

<div ng-app="myApp">
  <a href="#/firstPanel">1Panel</a>
  <a href="#/secondPanel">2Panel</a>
  <div ng-include src="'main.html'"><div>
  <div ng-view></div>

  <script type="text/ng-template" id="first_panel.html">
    First Panel
  </script>
  <script type="text/ng-template" id="second_panel.html">
    Second Panel
  </script>
  <script type="text/ng-template" id="main.html">  
    <div ng-controller="MainCtrl as mainCtrl">
      Main {{mainCtrl.foo}} <br/>
      <input type="text" ng-model="mainCtrl.foo"/>
      <br/>
    </div>
  </script>
</div>

JS

var myApp = angular.module('myApp', ['ngRoute']);

var my = {};

my.MainCtrl = function() {
  this.foo = 'foo';
}

my.SecondPanelCtrl = function() {
}

my.FirstPanelCtrl = function() {
}

var routeProvider = function($routeProvider) {
  $routeProvider.
      when('/firstPanel', {
        templateUrl: 'first_panel.html',
        controller: 'FirstPanelCtrl',
        controllerAs: 'firstPanelCtrl'
      }).
      when('/secondPanel', {
        templateUrl: 'second_panel.html',
        controller: 'SecondPanelCtrl',
        controllerAs: 'secondPanelCtrl'
      }).
      otherwise({redirectTo: '/firstPanel'});
};

myApp.config(routeProvider);

// register all controllers
myApp.controller('MainCtrl', my.MainCtrl);

myApp.controller('FirstPanelCtrl', my.FirstPanelCtrl);
myApp.controller('SecondPanelCtrl', my.SecondPanelCtrl);

这是我的jsfiddle：

http://jsfiddle.net/ccTd6/14/

Answer 1

HTML语法中的一个错误令人困惑：

<div ng-include src="'main.html'"></div>
                                   ^
          here you missed the `/`__|

注意：
至少在我试过的Chrome中，浏览器会混淆并完全删除ngView div - 所以在任何情况下它都不是Angular的错误。

NgRoute没有在jsfiddle工作

1 个答案: