Question

使用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专门调出控制器，那么一切都会出现。有人可以在这里指出我的错误吗？

Answer 1

您需要进行以下3项更改：

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

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

2。改变

controller: 'controllers/tempController'

到

controller: 'tempController'

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

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

这样当没有路由匹配时，它会转到default-page-name.html。这是您的情况下发生的情况，当您第一次加载页面时，没有路由匹配。如果你想查看temp.html，你必须1）点击转到＃/ Holdings的链接，或2）使用'/ Holdings'作为“其他”路线，如上所示。

Answer 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";
}]);

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

2 个答案: