Использование контроллеров, добавленных маршрутами, для объявления переменных $ scope в Angular JS?

0

Мое приложение - SPA. Он включает шаблоны, основанные на маршруте. Он также объявляет переменную области действия на основе маршрута. Я выполнил эту последнюю часть, установив контроллер для каждого маршрута в службе.config.

Это моя конфигурация...

spa.config(function($routeProvider) {
    $routeProvider
            .when('/home', {
                templateUrl: '/partials/home.html',
                controller: 'homeController'
            })
            .when('/about', {
                templateUrl: '/partials/about.html',
                controller: 'aboutController'
            })
            .when('/skills', {
                templateUrl: '/partials/skills.html',
                controller: 'skillsController'
            })
            .when('/experience', {
                templateUrl: '/partials/experience.html',
                controller: 'experienceController'
            })
            .when('/resume', {
                templateUrl: '/partials/resume.html',
                controller: 'resumeController'
            })
            .when('/contact', {
                templateUrl: '/partials/contact.html',
                controller: 'contactController'
            })
            .otherwise({
                redirectTo: '/home'
            });
});

Это все мои контроллеры...

/*Template Controllers*/

var homeController = spa.controller("homeController", function($scope) {
    $scope.currentLink = "home";
})

var aboutController = spa.controller("aboutController", function($scope) {
    $scope.currentLink = "about";
})

var skillsController = spa.controller("skillsController", function($scope) {
    $scope.currentLink = "skills";
})

var experienceController = spa.controller("experienceController", function($scope) {
    $scope.currentLink = "experience";
})

var resumeController = spa.controller("resumeController", function($scope) {
    $scope.currentLink = "resume";
})

var contactController = spa.controller("contactController", function($scope) {
    $scope.currentLink = "contact";
})

/*Dynamic CSS Linking*/

var cssController = spa.controller("cssController", function($scope) {
    this.fileName = $scope.currentLink;
});

/*Navigation Controller*/

var navigationController = spa.controller("navigationController", function($scope) {
    this.checkCurrent = function(checkValue) {
        return $scope.currentLink == checkValue;
    }
    this.linkValues = [
    {linkContent: "Home", linkValue: "home"},
    {linkContent: "About", linkValue: "about"},
    {linkContent: "Skills", linkValue: "skills"},
    {linkContent: "Experience", linkValue: "experience"},
    {linkContent: "Resume", linkValue: "resume"},
    {linkContent: "Contact", linkValue: "contact"}
    ];
});

И это мой HTML

<!DOCTYPE html>
<html  ng-app="spa">
    <head ng-controller="cssController as cssCtrl">
        <title>
            Allen Hundley
        </title>
        <!--Favicon-->
        <link rel="shortcut icon" href="http://allenhundley.com/images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="http://allenhundley.com/images/favicon.ico" type="image/x-icon">
        <!--End Favicon-->
        <!--CSS-->
        <link rel="stylesheet" type="text/css" href="/base.css">
        <link rel="stylesheet" type="text/css" ng-href="http://allenhundley.com/css/partials_css/{{ cssCtrl.fileName + '.css' }}">
        <!--End CSS-->
        <!--JavaScript Sources-->
        <script type="text/javascript" src="/angular.js"></script>
        <script type="text/javascript" src="/angular-route.js"></script>
        <!--End JavaScript Source-->
        <!--JavaScript-->
        <script type="text/javascript" src="/modules.js"></script>
        <script type="text/javascript" src="/services.js"></script>
        <script type="text/javascript" src="/controllers.js"></script>
        <script type="text/javascript" src="/directives.js"></script>
        <!--End JavaScript-->
    </head>
    <body>
        <div id="navigation">
            <div id="link_wrapper" ng-controller="navigationController as navCtrl">
                <navigation-links></navigation-links>
            </div>
        </div>
        <div ng-view id="wrapper"></div>
    </body>
</html>

Все контроллеры и фабрики применяются к spa модулю.

Ссылки на моей странице ссылаются на новые маршруты. Эта часть работает отлично. Кроме того, контроллеры, которые добавляются маршрутом, объявляют переменную области видимости, которая позже захватывается некоторыми другими контроллерами.

Первое место, которое используется этой переменной области, находится в cssController. Цель этого контроллера - динамически связать файл css, который будет относиться к шаблону HTML.

Второе место, которое используется этой переменной области, находится в navigationController. Хотя вы не можете видеть это, в каждой ссылке в директиве элемента есть ссылка на функцию checkCurrent navigationController. Эта функция возвращает логическое значение, которое влияет на то, имеет ли ссылка CSS к нему, что делает его "активной" ссылкой.

Проблема здесь в том, что либо моя переменная области не объявляется, либо я не получаю ее правильно.

Как это сделать?

Теги:
scope

1 ответ

0

Вы намерены использовать currentLink для всех контроллеров в своем приложении? Если да, то есть несколько способов сделать это.

Первый способ - использовать $rootScope. Используемая вами $scope не используется совместно с контроллерами, это разные экземпляры, каждая из которых привязана к представлению, в котором объявлен контроллер. $rootScope - это ваш верхний уровень $scope который имеет только один экземпляр для каждого приложения, и вы можете удобно вводить его во все контроллеры.

var homeController = spa.controller("homeController", function($scope, $rootScope) {
    $rootScope.currentLink = "home";
})

Если у вас нет слишком большого количества данных, которые необходимо использовать в глобальной области (что вам не нужно), вы можете использовать этот подход. Или даже сделать объект, чтобы держать его, если у вас есть еще пара.

$rootScope.data = {};

Второй способ - использовать сервис. Это более "формальный" способ обмена данными между выбранными контроллерами. Контроллеры, которым нужны данные, будут внедрять службу, а контроллеры, которые этого не знают, не будут знать об этом. Есть много руководств, которые учат вас, как настроить службу, вот только один из способов.

spa.service('Navigation', function(){
    this.currentLink= null;

    // some people prefer get and set method here
    // var currentLink;
    // this.getLink = function() {return currentLink;}
    // this.setLink = function(input) {currentLink = input;}

    // and some uses an object wrapper for binding
    // this.data = {currentLink: null};

    // depends on which one suits your need and preference
});

В контроллере вы вводите их и используете как $rootScope

var homeController = spa.controller("homeController", function($scope, Navigation) {
    Navigation.currentLink = "home";
})

Изменить: в этом случае, когда вы пытаетесь выполнить сопоставление только по имени маршрута, вы можете просто использовать $location.path() для определения текущего пути.

jsbin

Поделиться
  • 0
    На самом деле, я только недавно обнаружил это сам. Вы очень правы по всем пунктам. Проблема, с которой я здесь сталкиваюсь, заключается в том, чтобы получить текущий маршрут динамически.
  • 0
    Вы можете получить маршрут по $location.path() , это то, что вам нужно?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню