当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How do you load partials from a non-standard directory in angular.js?

问题描述:

I have my angular app set up as a bundle within a Symfony app. Because of this restriction, the directory structure for the angular app is different. All public resources are symlinked to a static directory, including the partials. I got the app to load, the controllers fire, but none of the partials load for their specific controllers. I had this working as a standalone app (outside of Symfony), so I must be missing something with the new configuration.

index.html.twig:

note: the javascript files load just fine- that is the correct asset path

<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:

note: I tried making templateUrl just partials/ as well

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

note: the alerts fire just fine, but the partials don't load...

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

}]);

console output:

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.

Any idea what I am missing here? Any help would be greatly appreciated.

网友答案:

It looks like the problem you have is that ng-view is missing from your index markup.

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

Without this element, your controllers will load, but have no place to insert your view templates.

You can read more about it here

分享给朋友:
您可能感兴趣的文章:
随机阅读: