AngularJS v1.3.13 ng-view 不触发控制器渲染模板答案

【问题标题】：AngularJS v1.3.13 ng-view not triggering controller to render templateAngularJS v1.3.13 ng-view 不触发控制器渲染模板
【发布时间】：2015-02-11 00:55:55
【问题描述】：

使用 ng-view 从我的控制器呈现模板时遇到问题。 index.html 文件最初是提供给客户端的，看起来像。

<!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-view 时，什么都不会呈现。控制器永远不会在调试器中触发。如果我通过 ng-controller 专门调用控制器，那么一切都会显示出来。有人可以在这里指出我的错误吗？

【问题讨论】：

尝试将“controllers/tempController”更改为“tempController”。为什么要使用同一个控制器来查看和导航？
刚刚试了一下。不工作。控制器和模板在“app”的父文件夹中都有自己的文件夹
你能解释一下你的意思吗我专门通过 ng-controller 调用了控制器然后一切都显示出来了。是您的 HTML @*<div ng-controller="tempController">{{Heading}}</div>*@ 中的这个片段吗（不需要）
你不需要告诉控制器文件的路径。您只需要将控制器名称告诉您的 routeProvider
@MichaelColeman 是的，如果我取消注释该行，那么页面上将显示“Hello World”

标签： javascript angularjs

【解决方案1】：

您需要以下 3 项更改：

1) 在控制器函数中添加 $scope 作为参数

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

2。改变

controller: 'controllers/tempController'

到

controller: 'tempController'

仅供参考，控制器的命名约定是以大写字母开头的控制器。
3.另外，你应该添加一个

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

这样当没有路由匹配时，它会转到 default-page-name.html。这就是您的情况，当您第一次加载页面时，没有路线匹配。如果您想查看 temp.html，您必须 1) 单击指向 #/Holdings 的链接，或 2) 使用“/Holdings”作为“否则”路径，如上所示。

【讨论】：

似乎在路线中遇到了其他问题。谢谢！
您可能想研究 ui-router (github.com/angular-ui/ui-router) 而不是使用 ng-router，因为 AngularJS 正在转向与 ui-router 非常相似的东西。在 v1.4 中。我发现它更容易使用。祝你好运！

【解决方案2】：

试试这个：

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

而且参数中也缺少 $scope：

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

【讨论】：

在函数参数中添加了 $scope。接得好。但是这不起作用:(
您似乎还缺少ng-app 指令属性。尝试用<body ng-app='hlmApp'> 替换您的<body> 标签。
ng-app 在 html 标签中 :) 将它移到 body 标签中，但仍然没有运气 :(