AngularJS v1.3.13 ng-view不觸發控制器渲染模板

使用ng-view從我的控制器渲染模板時遇到問題。 index.html文件最初提供給客戶端，看起來像。AngularJS v1.3.13 ng-view不觸發控制器渲染模板

<!doctype html> 
<html lang="en" ng-app="hlmApp"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 

<title></title> 
<link rel="stylesheet" href="@Model.Root.Resource/bower_components\\/bootstrap/dist/css/bootstrap.css"> 

@RenderSection("BootScript") 

<!-- app.js will load the angular module --> 
<script src="@Model.Root.Resource/bower_components/angular/angular.js"></script> 
<script src="@Model.Root.Resource/bower_components/angular-route/angular-route.js"></script> 
<script src="@Model.Root.Resource/app/app.js"></script> 
<script src="@Model.Root.Resource/app/controllers/controllers.js"></script> 
</head> 

<body> 

<div class="container"> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
      <ul class="nav"> 
       <li><a href="#/Overview">A link here</a></li> 
      </ul> 
     </div> 
    </div> 
    <div ng-view></div> 
    @*<div ng-controller="tempController">{{Heading}}</div>*@ 
</div> 


@RenderBody() 



</body> 
</html>

服務器將壓縮我的app.js和controllers.js文件以及deps。

/// ap.js /// 
var hlmApp = angular.module('hlmApp', ['ngRoute', 'MyTempControllers']); 

hlmApp.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/Holdings', { 
     templateUrl: 'templates/temp.html', 
     controller: 'controllers/tempController' 
    }); 
}]);

控制器是非常簡單，如下

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

MyTempControllers.controller('tempController', ['$scope', function() { 
    console.log("stuff happening"); 
    $scope.Heading = "Hello World"; 
}]);

然後將HTML模板如下

<div> 
    <h3>{{Heading}}</h3> 
</div>

當我使用NG-觀點從來都沒有呈現。調試器從不觸發控制器。如果我通過ng控制器專門調出控制器，那麼一切都顯示出來。有人可以在這裏指出我的錯誤嗎？

來源

2015-02-10 Mateo

嘗試將「controllers/tempController」更改爲「tempController」。你爲什麼使用相同的控制器來查看和標題？ – nanndoj 2015-02-10 16:37:33

剛剛嘗試過。不工作。控制器和模板各自在'app'的父文件夾中有自己的文件夾 – Mateo 2015-02-10 16:40:37

你能解釋一下你的意思嗎？我通過ng-controller專門調出控制器，然後顯示所有內容*。這是你的HTML'@ *

* @這個片段（應該不需要） – 2015-02-10 16:43:09

您需要這3個變化：

1）加$範圍作爲一個參數您的控制器功能

MyTempControllers.controller('tempController', ['$scope', function ($scope) { 
    ... 
}]);

2. 更改

controller: 'controllers/tempController'

到

controller: 'tempController'

僅供參考，對於控制器的命名規則是開始與控制器的大寫字母。
3.此外，還應該加上一個

.otherwise({ 
    template: templates/temp.html, 
    controller: 'tempController' 
});

，這樣，當沒有路由匹配，它會默認頁，name.html。這就是你的情況，當你第一次加載頁面，沒有路線匹配。如果您想查看temp.html，您必須1）或者點擊轉到＃/ Holdings的鏈接，或者2）使用「/ Holdings」作爲「否則」路線，如上所述。

來源

2015-02-10 16:55:55 restassured

似乎擊中了其他路線，謝謝！ – Mateo 2015-02-10 17:03:19

你可能想看看ui-router（https://github.com/angular -ui/ui-router），而不是使用ng-router，因爲AngularJS在v1.4中轉移到了與ui-router非常相似的地方，我發現它更易於使用。祝你好運！ – restassured 2015-02-10 17:26:25

試試這個：

hlmApp.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/Holdings', { 
     templateUrl: 'templates/temp.html', 
     controller: 'tempController' // just the name 
    }); 
}]);

，也$範圍中缺少參數：

MyTempControllers.controller('tempController', ['$scope', function ($scope) { 
    console.log("stuff happening"); 
    $scope.Heading = "Hello World"; 
}]);

來源

2015-02-10 16:45:33 Thierry

添加$範圍的函數params。良好的捕獲。然而，這並沒有工作:( – Mateo 2015-02-10 16:48:26

它似乎也錯過了一個'ng-app'指令屬性，試着用'替換''標籤。 – 2015-02-10 16:51:22

ng-app is在html標籤中:)將它移動到body標籤，但仍然沒有運氣:( – Mateo 2015-02-10 16:53:07

AngularJS v1.3.13 ng-view不觸發控制器渲染模板

回答

相關問題