AngularJS指令与routeProvider

时间:2014-01-28 18:43:03

标签: javascript angularjs location route-provider

我的指令有问题。实际上,当$ location改变我的url路径时,我的routeProvider没有被触发。

这是我的代码:

var appPath = location.pathname;
var bdaApp = angular.module('bdaApp', ['ui.bootstrap', 'ngResource', 'ngRoute', 
                                       'homeController', 'itemController', 'userController', 
                                       'eildController']);

    bdaApp.config(['$routeProvider', function($routeProvider) {

        $routeProvider
            .when('/', { templateUrl : 'layout/home', controller : 'HomeListController'})
            .when('/item', { templateUrl : 'layout/item', controller : 'ItemListController'})
            .when('/user', { templateUrl : 'layout/user', controller : 'UserListController'})

            .when('/eild/consultar', { templateUrl : 'eild/layout', controller : 'EildListController'})
            .when('/eild/detalhes/:bilhetePedido', {templateUrl : 'eild/detalhes', controller : 'EildDetailController'});

    }]);

    bdaApp.directive('myDirective', ['$location', function($location) {
        return {
            restrict: 'A',
            template:
                    '<ul class="nav navbar-nav">' +
                    '   <li ng-repeat="p in parents" class="dropdown">' +
                    '       <a ng-click="go(p.path)" class="dropdown-toggle">' +
                    '           {{p.nome}}' +
                    '           <b ng-show="p.menus.length > 0" class="caret"></b>' +
                    '       </a>' +
                    '       <ul ng-show="p.menus.length > 0" class="dropdown-menu">' +
                    '           <li ng-repeat="s in p.menus">' +
                    '               <a ng-click="go(s.path)">{{s.nome}}</a>' +
                    '           </li>' +
                    '       </ul>' +
                    '   </li>' +
                    '</ul>',
            controller: ['$scope', '$resource', function($scope, $resource) {

                $scope.getItems = function() {
                    $resource(appPath + 'menus/teste').query(function(data) {
                        $scope.parents = data;
                    });
                };
            }],
            link: function(scope, iElement, iAttrs) {
                scope.getItems();
                scope.$watch('parents', function(newVal) {});

                scope.go = function(path) {
                    if (path != null) {
                        $location.path(path);
                    }
                };
                scope.$watch('go', function(newVal) {});
            }
        };
    }]);

和我的HTML

<div>
    <div my-directive items="items"></div>
</div>

当我点击任何链接时,它会调用我的“go”功能,将我的网址更改为“http://localhost:8080/bda-web/#/item”,但不会更改网页。所以我假设我的routeProvider没有通过我的指令调用。

我也尝试将我的功能外部化为

bdaApp.controller('MenuController', ['$scope', '$location', function($scope, $location) {
    $scope.go = function(path) {
        if (path != null) {
            alert(path);
            $location.path(path);
        }
    };
}]);

但是我无法做这项工作。

无论如何,有什么建议吗?

由于

1 个答案:

答案 0 :(得分:0)

我刚使用<a href>代替<a ng-click>

进行了解决方法