AngularJS(1)查看并指示不工作

时间:2017-03-21 19:20:37

标签: angularjs angularjs-directive angular-ui-router

我正在研究一个小角度的应用程序,但是指令和视图没有被渲染,我已经调查了我的代码,但是我没有找到任何东西,代码可以在下面看到:

的index.html

<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">

<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">

<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>

<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>

<!-- My Directives -->
<script src="js/directives/header.js"></script>

<title>Music</title>
</head>

<body>

<header-menu></header-menu>

<div class="container">
    <ng-view></ng-view>
</div>
</body>

</html>

main.js

angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController', 
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider.when('/musicas',{
    templateUrl: 'views/musicas/index.html',
    controller: 'musicasController'
});
});

索引controller.js

angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});

musicas-controller.js

angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){

});

header.js

angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
    restrict: "AE",
    templateUrl: "views/directives/header.html"
};

return ddo;
});

1 个答案:

答案 0 :(得分:0)

一旦模块注入angular.module,无需再次注入它们。只是获得参考。

从模块注入器中删除'musicasController'。控制器不需要注入模块

angular.module('rdi_music', ['ngRoute', 'ngResource', 
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider.when('/musicas',{
    templateUrl: 'views/musicas/index.html',
    controller: 'musicasController'
});
});

索引controller.js

angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});

musicas-controller.js

angular.module('rdi_music')
.controller('musicasController', function($scope){

});

Demo