Javascript 使用路由添加的控制器在Angular JS中声明$scope变量？_Javascript_Html_Css_Angularjs_Scope

Javascript 使用路由添加的控制器在Angular JS中声明$scope变量？

javascript html css angularjs

Javascript 使用路由添加的控制器在Angular JS中声明$scope变量？,javascript,html,css,angularjs,scope,Javascript,Html,Css,Angularjs,Scope,我的申请是水疗。它包括基于路由的模板。它还声明了一个基于路由的范围变量。我通过在.config服务上为每个路由设置一个控制器来完成最后一部分这是我的配置 spa.config(function($routeProvider) { $routeProvider .when('/home', { templateUrl: '/partials/home.html', controller: 'homeC

我的申请是水疗。它包括基于路由的模板。它还声明了一个基于路由的范围变量。我通过在.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="http://allenhundley.com/css/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="http://allenhundley.com/resources/angular.js"></script>
        <script type="text/javascript" src="http://allenhundley.com/resources/angular-route.js"></script>
        <!--End JavaScript Source-->
        <!--JavaScript-->
        <script type="text/javascript" src="http://allenhundley.com/js/modules.js"></script>
        <script type="text/javascript" src="http://allenhundley.com/js/services.js"></script>
        <script type="text/javascript" src="http://allenhundley.com/js/controllers.js"></script>
        <script type="text/javascript" src="http://allenhundley.com/js/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

模块

“我的网页”中的链接指向新路线。那部分工作得很好。此外，路由添加的控制器声明了一个作用域变量，该变量随后被其他一些控制器捕获

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

使用此范围变量的第一个位置是

csscocontroller

。此控制器的目的是动态链接一个css文件，该文件将属于HTML模板

使用此范围变量的第二个位置是

navigationController

。虽然您看不到它，但在element指令的每个链接中都有一个指向

navigationController

的

checkCurrent

功能的链接。此函数返回一个布尔值，该布尔值影响链接是否应用了CSS，从而使其成为“活动”链接

这里的问题是要么我的范围变量没有被声明，要么我没有正确地访问它

如何实现这一点？

您是否打算在应用程序中的所有控制器上共享

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（）

确定当前路径

仍然不清楚你想表达什么。可能是劫掠者可以帮助什么是劫掠者？我能做些什么让它更清楚？在这个网站上重现这个问题：事实上，我最近自己发现了这个问题。你说得很对。我在这里遇到的问题实际上是动态获取当前路由。您可以通过

$location.path（）

获取路由，这就是您需要的吗？$location.path（）将在我加载页面时为我提供路由。我有一个单页应用程序，所以我需要它在路线改变时更新。试试看。实际上，即使是SPA，url也会发生变化。SPA从使用相同的URL发展而来加入我聊天？