- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在 AngularJS 中,创建和使用自定义服务进行 DOM 操作并在 UI 的不同部分共享相同的功能是一种常见的做法,我的问题也与此案例相关,如下所示:
我的应用程序中有一个侧边栏组件和一个用于最小化单击时侧边栏的按钮,但问题是它们的 Controller 不同,因此我在名为 sidebarService
的同一模块中创建了一个服务并注入(inject)该服务到两个 Controller 中,但是当服务中的数据通过 Controller 的事件发生变化时,我无法在另一个 Controller 中处理它,所以如何做到这一点:
app-module.js
(function() {
'use strict';
var app = angular.module('app', []);
});
sidebar-service.js
(function() {
'use strict';
angular.module('app')
.factory('sidebarService', function() {
var showClass = false;
return {
toggle: function() {
showClass = !showClass;
},
isClassShown: function() {
return showClass;
}
};
});
});
app-controller.js
(function() {
'use strict';
angular.module('app')
.controller('App', ['sidebarService', function(sidebarService) {
var appVm = this;
appVm.isClassShown = function() {
return sidebarService.isClassShown();
};
}]);
});
navbar-controller.js
(function() {
'use strict';
angular.module('app')
.controller('Navbar', ['sidebarService', function(sidebarService) {
var navbarVm = this;
navbarVm.toggleSidebar = function() {
sidebarService.toggle();
};
}]);
})();
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>My App</title>
<!-- ... -->
</head>
<body ng-controller="App as app">
<ul ng-controller="Navbar as navbar">
<li>
<a href="#" ng-click="navbar.toggleSidebar()">Toggle Sidebar</a>
</li>
<!-- ... -->
</ul>
<div class="sidebar" ng-class="{mini:app.isClassShown()}">
<!-- ... -->
</div>
</body>
</html>
最佳答案
嗯,有两种方法:
解决方案 1:一个非常简单且典型的 Angular 解决方案:您可以使用 $scope.$watch
来跟踪来自 Controller 的值。因此,在您的情况下,您需要将以下观察者添加到您想要跟踪值的每个 $scope
中:
$scope.$watch(function() { return sidebarService.isClassShown() }, function(newValue, oldValue) {
console.log(newValue, oldValue);
});
换句话说,在您的应用程序 Controller 中:
(function() {
'use strict';
angular.module('app')
.controller('App', ['$scope', 'sidebarService', function($scope, sidebarService) {
var appVm = this;
appVm.isClassShown = function() {
return sidebarService.isClassShown();
};
$scope.$watch(function() { return sidebarService.isClassShown() }, function(newValue, oldValue) {
console.log('changed', newValue, oldValue);
});
}]);
});
解决方案2:抛出 Angular 事件并监听该事件:使用 Angular $emit 函数发出自定义事件。还可以使用第三方库来引发事件,我比标准的 Angular 事件系统更喜欢它。
关于angularjs - 如何在其他地方处理 angular.service 变更?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36215923/
我正在使用 choronos,它建议使用 start/stop 命令开始停止,如下所示 开始计时 停止计时 但是,我正在编写 puppet manifest,它只适用于下面的服务命令。 服务计时开始
来历及作用 services.exe进程程序文件是由微软公司为其发布的Windows操作系统定义的一个系统进程,常见于Windows 2000/XP/Vista/2007等系统中,被描述为服务和控
我一直在尝试使用installutil:installutil /u GSIS.FileMoverService.exe安装Windows服务。 我得到的输出是: Uninstalling assem
如果一个域有多个团队和多个 Web 应用程序,那么注册 Service Worker 来管理整个站点的最佳建议是什么?具有范围的顶级服务 worker /或子域中的多个服务 worker ?由于一个域
我已经在 eclipse 中创建了企业项目。动态web项目和ejb项目对企业项目有借鉴意义。当我运行管理员(企业项目)运行时选择 wildfly 服务器 18。我收到以下错误。谁能告诉我我错过了什么。
我已经使用 apache-cxf-2.7.4 创建了一个 Web 服务。我进入了我的项目中制作的类(class)。我的项目中的库是: math3-commons-3.2.jar XStream-1.4
我在域中的 Virtual Box 中运行集群计算机,默认情况下服务在 Network 服务下运行,服务一直停止,事件日志中出现以下错误。 请从下面的错误日志中查找错误详细信息。任何帮助都会很棒。 L
在我的应用程序中,用户可以在 map 上发布事件。应用程序的入口点是一个无状态的 web api 服务。为了在内部代表用户,我想要一个用户服务。我应该何时使用 Reliable Stateful Ac
当我尝试运行在WIX中创建的安装程序时,出现以下错误消息: “服务'Report Generator Service'(报告生成器服务)无法启动。请验证您是否具有启动系统服务的足够特权”。 我已经在这
尝试使用 cloudformation 创建 ECS 服务(在 Fargate 上)但出现错误: Invalid service in ARN (Service: AmazonECS; Status
我正在编写一个简单的Windows服务,该服务每个月向所有员工发送一封电子邮件。我的问题是,完成后如何停止自我?我是该领域的新手,请帮帮我。非常感谢。 它将部署在服务器上以每月运行。我没有开始做这件事
有谁知道是否有办法在 service worker 中获取此号码或日期: 将我的服务 worker 缓存命名为 cache-1182 会很方便或 cache-20171127171448 我想在安装事
我想开始使用 Azure Service Fabric 技术。 我按照this document工作并安装最新的SDK。安装后,我打开 PowerShell(“以管理员身份运行”)命令行窗口并写入这些
我在使用 whenever gem 时遇到了一些问题。我创建了一个 rake 任务,当我自己启动它时它工作得很好但是当我在日志中收到以下消息时尝试自动执行它: ActiveRecord::Statem
我想在 service fabric 集群中为两个不同的 web 应用程序(webpi/website)共享 http/80 端口,应用程序必须有 2 个不同的主机名: mywebapi.com 和
我创建了一个使用 MongoDB 实现 hibernate OGM 的应用程序。它在 Eclipse 中运行得很好,但是,当我构建一个 fat jar 并尝试运行它时,出现以下错误: Exceptio
我有一个 Selenium Python 测试套件。它开始运行,但几分钟后抛出以下错误: Exception AttributeError: "'Service' object has no attr
我按照此链接的说明进行操作:https://www.thegeekdiary.com/centos-rhel-7-how-to-make-custom-script-to-run-automatica
我在 ubuntu 下的 jboss 上部署了简单的“HelloWorld”Web 服务。 我创建了简单的客户端,但我无法让它工作。每次运行客户端时,我都会收到 NullPointerExceptio
我正在尝试为我的网站使用后台定期同步。我正在使用 localhost 并在 1*1000 毫秒时注册 periodicsync 事件,但这根本不会触发。 我看过这个demo ,但即使我将该网站安装为应
我是一名优秀的程序员,十分优秀!