javascript - AngularJS v1.3.13 ng-view 不触发 Controller 渲染模板

标签 javascript angularjs

在使用 ng-view 从我的 Controller 呈现模板时遇到问题。 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'
    });
}]);

Controller 非常简单,如下所示

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

最佳答案

您需要这 3 个改变:

1) 在 Controller 函数中添加 $scope 作为参数

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

2。 改变

controller: 'controllers/tempController'

controller: 'tempController'

仅供引用, Controller 的命名约定是以 Controller 的大写字母开头。
3.另外,你应该添加一个

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

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

关于javascript - AngularJS v1.3.13 ng-view 不触发 Controller 渲染模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28436824/

相关文章:

javascript - Bootstrap 日期选择器问题与 Angular 鼠标悬停

javascript - 如何为大型且可维护的应用程序构建 angularJS 模型?

javascript - 如何从 chrome 扩展 popup.html 中重新加载当前选项卡?

javascript - select2 获取触发选择/取消选择的选项值

javascript - 使用在 AngularJS 中动态构建的表中的输入验证行

javascript - 如何向这个 Angular JS 应用程序添加编辑事件?

javascript - 无法通过 $resource 获取数组

javascript - d3js/Angular 8 应用程序问题

javascript - 如何将文件的内容发送到我的服务器?

javascript - CSS/JavaScript 使用 Div 使页面部分变灰