AngularJS指令与routeProvider

Question

I have a problem with my directive. Actually my routeProvider is not being fired when the $location changes my url path.

Here is my code:

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) {});
            }
        };
    }]);

and my html

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

when I click on any link, it calls my "go" function, change my url to " http://localhost:8080/bda-web/#/item ", but does not change the page. So I assume my routeProvider is not being called through my directive.

I also tried to externalize my function like

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

but I couldn't do this work.

Anyway, any suggestion?

Thanks

Answer 1

我只是使用<a href>而不是<a ng-click>进行了变通