Question

我是Angularjs的新手，我正在尝试建立一个新网站，但我对这个设置感到困惑。我有一个模块，我正在使用$ route来成功导航，但我迷失了如何处理我的导航。当我加载模块时，我想读取我的数据库以获取允许用户访问的链接列表，然后在导航中将它们吐出。我不想在每个视图中重复这一点，因为我不需要。所以我试图找出如何运行ajax调用一次然后继续更改视图（我还想添加一个类.selected到他们所在的任何视图）。如何使用指令来实现这一目标？

(function () {
    var app = angular.module('manage', ['ngRoute', 'manageControllers']);

    /*
    I've tried this but obviously $http isn't injected. Can I even do that?
    var thisApp = this;

    $http.get('/test/angular/php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {

    });
    */


    app.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/', {
                    templateUrl: 'templates/dash.html',
                    controller: 'DashCtrl'
                }).
                when('/inventory/', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                when('/inventory/:mvKey', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                when('/inventory/:mvKey/:tab', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                /* etc...*/
        }
    ]);
})();

修改

我试图让导航器运行一次

controllers.js

var manageControllers = angular.module('manageControllers', []);

var thisApp = this;
nav = null;
navSelected = '/';

manageControllers.controller('NavCtrl', ['$scope', '$http', function($scope, $http) {
    if (thisApp.nav === null) {
        $http.get('php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {
            console.log(response.data);
            thisApp.nav = response.data;
            $scope.nav = thisApp.nav;
            $scope.select = thisApp.navSelected;
        });
    } else {
        $scope.nav = thisApp.nav;
        $scope.select = thisApp.navSelected;
    }
}]);

manageControllers.controller('DashCtrl', ['$scope', function($scope) {
    thisApp.navSelected = '/';
}]);

Answer 1

我会转到UI路由器（https://github.com/angular-ui/ui-router）而不是$route。它使您可以更灵活地使用路由。

一个小例子：

app.config(['$stateProvider',
        function($stateProvider) {
            $stateProvider.
                state('/', {
                    url: '/',
                    views: {
                        '': {
                            templateUrl: 'templates/dash.html',
                            controller: 'DashCtrl'
                        },
                        'nav@': {
                            templateUrl: 'path/to/nav.html',
                            controller: 'NavCtrl'
                        },
                    }
                }).
                state('/inventory/', {
                    url: '/',
                    views: {
                        '': {
                            templateUrl: 'templates/dash.html',
                            controller: 'DashCtrl'
                        },
                        'nav@': {
                            templateUrl: 'path/to/nav.html',
                            controller: 'NavCtrl'
                        },
                    }
                }).
                // ...

并在index.html

中

<div ui-view="nav"></div>
<div ui-view ></div>

仔细看看UI路由器的文档，你可以用它做更多的事情！

从ng-view中分离导航

1 个答案: