个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的应用程序是一个 SPA。它包括基于路线的模板。它还声明了一个基于路由的范围变量。我通过为 .config 服务上的每个路由设置一个 Controller 来完成最后一部分。
这是我的配置...
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'
});
});
这些都是我的 Controller ...
/*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>
所有 Controller 和工厂都应用于spa模块。
我页面中的链接指向新路线。那部分工作完美。此外，由路由添加的 Controller 声明一个范围变量，该变量稍后会被其他一些 Controller 获取。
首先使用此作用域变量的地方是 cssController。这个 Controller 的目的是动态链接一个属于 HTML 模板的 css 文件。
第二个使用此范围变量的地方是在 navigationController 中。虽然您看不到它，但在 element 指令的每个链接中都有一个指向 navigationController 的 checkCurrent 函数的链接。此函数返回一个 bool 值，它会影响链接是否应用了 CSS，从而使其成为“事件”链接。
这里的问题是我的范围变量没有得到声明，或者我没有正确访问它。
我该如何实现？
最佳答案
您是否打算在应用中的所有 Controller 之间共享 currentLink？如果是，那么有几种方法可以做到这一点。
第一种方式是使用$rootScope。您使用的 $scope 不在 Controller 之间共享，它们是不同的实例，每个都绑定(bind)到声明 Controller 的 View 。 $rootScope 是您的顶级 $scope，每个应用程序只有一个实例，您可以方便地将它注入(inject)所有 Controller 。
var homeController = spa.controller("homeController", function($scope, $rootScope) {
$rootScope.currentLink = "home";
})
如果您没有太多需要在全局范围内共享的数据(您不应该这样做)，则可以使用这种方法。如果您还有几个，甚至可以制作一个物体来固定它。
$rootScope.data = {};
第二种方式是使用服务。这是在选定 Controller 之间共享数据的更“正式”方式。需要数据的 Controller 将注入(inject)服务，不需要的 Controller 不会意识到它。有很多指南可以教您如何设置服务，这里只是其中一种方法。
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
});
在 Controller 中你注入(inject)它们并像$rootScope一样使用它
var homeController = spa.controller("homeController", function($scope, Navigation) {
Navigation.currentLink = "home";
})
编辑:在这种情况下，如果您尝试仅通过路由名称进行匹配，您可以只使用 $location.path() 来确定当前路径。
关于javascript - 使用路由添加的 Controller 在 Angular JS 中声明 $scope 变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31129041/
25
4
0
我在这里有我的 javascript 代码: define(['controllers/controllers', 'services/alerts'], function(module) {
的意义是什么scope = scope-token *( SP scope-token ) scope-token = 1*( %x21 / %x23-5B / %x5D-7E ) 在 RFC6749
我是 AngularJS 的新手。我试图找出这两个 Controller 定义之间的区别: app.controller('simpleController', ['$scope', function
似乎所有 Guice 的开箱即用 Scope 实现本质上都是基于线程的(或完全忽略线程): Scopes.SINGLETON和 Scopes.NO_SCOPE忽略线程并且是边缘情况:全局范围和无范围。
如果这个问题涉及的是一个常见问题，我很抱歉，但我发现这个问题非常抽象，并且无法真正为其构建一个好的 Google 搜索词。 我试图理解并找到 Maven 中提供的依赖项的用例。我的想法是这样的: 假设
假设我有以下 Controller angular.module('scopeExample', []) .controller('MyController', ['$scope', func
当前在TmThemeEditor上注册的243种配色方案中， 我注意到几乎没有人使用范围选择器运算符。 对于以下情况，运算符非常有用: (text.html | text.xml) & (meta.t
我有一些行为不符合预期的代码......我在 AngularJS Controller 中有一个事件监听器，如下所示: $scope.$on("newClipSelected", function(e
首先，如果帖子太长，我深表歉意。另外，为了以防万一这会以某种方式干扰您可能给我的答案，我不会以通常的方式定义我的 Controller 。相反，我关注http://www.technofattie.c
我有一个模式，其中许多项目类型都是“可编辑的”。这意味着我有很多模板(每种可编辑项目类型一个)，这些模板期望具有唯一的字段，但具有通用功能(编辑、保存、取消编辑、删除等)。这些常见功能导致 Contr
$evalAsync 和 $applyAsync 之间有什么区别？我的理解是，当我从指令中使用 $evalAsync 时，表达式将在浏览器呈现之前进行计算。 举个例子，如果我想滚动到页面上的特定位置但
我试图为一个 $scope 变量提供另一个 $scope 变量的值。有人能告诉我出了什么问题吗？查看简单的 plunker 了解详细信息: http://plnkr.co/edit/TlKnd2fM5
我有以下一段 Angular 代码 $scope.prepare = function(){ $scope.elems = [1,2,3]; }; $scope.action = functio
我正在关注 Angularjs 的官方教程，但我陷入了第 2 步。 这是一个片段，我不明白 $scope:scope 的含义， describe('PhoneListCtrl', function()
根据文档， Global: Component is shared among all users. Session: Separate instances of the component are
显示作用域变量，类似于 Angularjs 中的 ng-repeat 元素 这些是我的范围变量 $scope.published = true; $scope.count = 3; 我还有一个名为 l
我是 Angular 的新手，我想在普通的 javascript 中做一些非常简单的事情，但我无法找到如何在 Angular 中正确地做到这一点! 我想设置一个通用函数来清除输入文本字段: 我有这个
在article中发现了这样一个idea : Notice how the value function takes the scope as parameter (without the $ in
注释部分将位于 $scope.$on 下。我需要将 options 返回到我保存 $scope.$emit 的地方。请帮助!!! if (gridConfig.Batch) {
我有一个带有 2 个作用域的 Controller : app.controller('search', function($scope) { $scope.value1 = '';
我是一名优秀的程序员,十分优秀！