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不触发控制器渲染模板

回答

相关问题