如何从 angular.js 中的非标准目录加载部分内容？答案

【问题标题】：How do you load partials from a non-standard directory in angular.js?如何从 angular.js 中的非标准目录加载部分内容？
【发布时间】：2014-08-20 22:45:09
【问题描述】：

我将我的 Angular 应用程序设置为 Symfony 应用程序中的一个包。由于这个限制，Angular 应用程序的目录结构是不同的。所有公共资源都被符号链接到一个静态目录，包括部分资源。我让应用程序加载，控制器触发，但没有为特定控制器加载任何部分。我把它作为一个独立的应用程序（在 Symfony 之外）工作，所以我必须在新配置中遗漏一些东西。

index.html.twig:
注意：javascript 文件加载得很好——这是正确的资产路径

<body ng-controller="MainController">

    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#/">Home</a></li>
                <li><a href="#/groups">Groups</a></li>
            </ul>
        </div>
    </nav>

    <div ng-view=""></div>
                                                                                                                                                                                                                <div ng-view></div>                                                                                                                                                                                                                                                                                                                                                                                                     <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

    <script src="bundles/translations/webadmin/app/js/ngroute.js"></script>
    <script src="bundles/translations/webadmin/app/js/app.js"></script>
    <script src="bundles/translations/webadmin/app/js/services.js"></script>
    <script src="bundles/translations/webadmin/app/js/controllers.js"></script>
    <script src="bundles/translations/webadmin/app/js/filters.js"></script>
    <script src="bundles/translations/webadmin/app/js/directives.js"></script>

</body>

app.js:
注意：我尝试将 templateUrl 也设为 partials/

angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]).config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/groups', {templateUrl: 'bundles/translations/webadmin/app/partials/groups.html', controller: 'GroupsController'});
    $routeProvider.when('/', {templateUrl: 'bundles/translations/webadmin/app/partials/home.html', controller: 'HomeController'});
    $routeProvider.otherwise({redirectTo: '/'});
}]);

controllers.js
注意：警报触发得很好，但部分不加载...

angular.module('myApp.controllers', [])

.controller('MainController', ['$scope', function($scope) {
    alert('here?');
}])

.controller('HomeController', ['$scope', function($scope) {
    alert('here2');
}])

.controller('GroupsController', ['$scope', function($scope) {
    // TODO see below
}]);

控制台输出：

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) translations:1
Blink is considering rejecting non spec-compliant cross-origin web font requests: https://d3nkxvtkt5c8vi.cloudfront.net/0.4.2/fonts/proxima_nova_light_0.woff. Please use Access-Control-Allow-Origin to make these requests spec-compliant.

知道我在这里缺少什么吗？任何帮助将不胜感激。

【问题讨论】：

您的模板遇到什么错误？还可以尝试在 templateUrl 路径前添加 /。
@MattWay 我尝试将 / 添加到 templateUrl 路径 - 不走运。并且控制台没有JS错误。
好的，您的控制台输出可以推断模板正在正确加载但未显示，或者根本没有尝试加载。我现在可以帮助您的唯一方法是，如果您将整个应用程序的一个小版本的 pastebin（或类似的）放在一起，以便我可以在本地运行它，因为路由问题很难用小提琴之类的东西来诊断。

标签： javascript angularjs

【解决方案1】：

您遇到的问题似乎是您的索引标记中缺少ng-view。

<div ng-view=""></div>

没有这个元素，你的控制器将被加载，但没有地方插入你的视图模板。

您可以阅读更多关于它的信息here

【讨论】：

能否列出您尝试加载页面时控制台的输出。
我在描述中添加了控制台输出