个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试使用 Angular 构建一个单页 Web 应用程序。
我有以下 3 个文件:script.js、index.html 和 about.html。
我希望 about.html 使用一项服务，以便使用 Angular 服务更改共享值(到所有其他页面，即 contact.html)。
我希望此服务有一个可以通过所有页面访问的值(消息)，一旦一个页面更改此值，所有其他页面都会知道这个新值...
由于某种原因，下面的代码不起作用......
为什么？
脚本.js
var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'SharedController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'SharedController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'SharedController'
});
});
scotchApp.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
scotchApp.controller('SharedController', ['$scope', 'myService', function($scope, myService) {
myService.set('hello');
$scope.message = myService.get();
}]);
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul>
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
<div ng-app="scotchApp" ng-view>
</div>
</body>
</html>
和about.html
<div class="jumbotron text-center">
<h1>old value</h1>
<script type="text/javascript">
myService.set('hello');
$scope.message = myService.get();
</script>
<p>{{ message }}</p>
</div>
我
最佳答案
编辑1:据我所知，您无法直接从 View 中使用服务。你必须通过 Controller 。当您希望用户通过 ng click 选择一个值时，我会执行以下操作:
about.html:
<div class="jumbotron text-center">
<h1>old value</h1>
<p>{{ message }}</p>
<button type="button" ng-click="updateMsg('I am in about')">Click Me</button>
</div>
Controller :
scotchApp.controller('AboutController', ['$scope', '$routeParams', 'myService',
function($scope, myService) {
$scope.updateMsg = function (msg) {
myService.set(msg);
$scope.message = myService.get();
}
}]);
原文:
我建议为每个页面制作不同的 Controller 。但是，您应该注意的一件事是，about.html 中的 JavaScript 无法工作，它正在访问 myService，因为 Angular 不知道/注入(inject)服务。你本来可以做的是:
scotchApp.controller('AboutController', ['$scope', '$routeParams', 'myService',
function($scope, myService) {
myService.set('About');
$scope.message = myService.get();
}]);
您的路线将更改为:
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'AboutController'
})
和about.html:
<div class="jumbotron text-center">
<h1>old value</h1>
<p>{{ message }}</p>
</div>
关于javascript - 使用 Angular 服务在 ng-view 页面之间共享数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38032791/
28
4
0
只是想知道是否有可能找出谁从 Windows 共享中读取了文件(最好使用 .NET，但 win32 native 可以)？ 我想做的是创建类似 awstats 的东西对于 Windows 共享，这样我
是否可以列出 Intent.ACTION_SEND ？我的意思是我需要知道是否有人通过 action_send 在 Facebook 上分享或在 Twitter 上发推文。 最佳答案 也许你想要一个更
我正在使用 Google Apps 应用程序。实际上，我想在不使用密码的情况下访问另一个 ID。我使用了 OAuth，它运行良好。但我无法分享特定人的日历。我尝试了以下代码。 GoogleOAuthP
我怎样才能只创建模拟器...可能吗？我知道，设备需要分发证书。 最佳答案 您只需将应用程序目录从 iPhone 模拟器复制到另一个实例/操作系统版本，它就应该可以工作。 因此，如果您想分发 3.1.3
我想使用多阶段构建来避免每次构建应用程序时都下载我的 Java 项目所需的所有 Maven 依赖项。 我正在考虑在第一阶段解决 Maven 依赖项，然后在第二阶段构建应用程序，这将需要访问在前一阶段下
我正在寻找保护用户下载内容的初步想法。用户下载充满有趣资源的 zip 文件，这些资源被提取到本地文件系统中以供应用程序使用。我的目标是防止用户通过互联网将下载的资源共享给其他用户(假设他们获得了对文件
我想知道在具有移动和桌面版本的网站上共享身份验证、 session 管理等的最佳方法是什么。我们正在运行 Tomcat，并且更愿意将移动站点和桌面站点的应用程序保持在不同的节点上。 我看过类似的帖子，
我发现了这个单例的实现。我怎样才能创建指向它的指针或共享指针？` 为什么这不起作用？自动测试 = Singleton::Instance(); class Singleton { public: st
我有一个 heroku 项目，我想与其他人分享。作为the instructions describe ，我使用 virtualenv 来管理环境和依赖项。有没有办法在新机器上从 requiremen
Maven 将所有 jar 存储在本地存储库 ~/.m2/repository/ 下。用户多时占用空间大。 那么，是否可以由多个用户共享这个本地存储库，或许在不同的目录结构下？ 最佳答案 简单的回答
为什么共享 worker 在重新加载页面时死了？应该是复活了我该如何解决这个问题？ 重装前 重新加载后(在example.com上按F5) parent worker var port = new S
我正在开发多个小型应用程序，这些应用程序将共享通用和共享模块和 Assets 。 关于如何创建项目结构的部分在这里回答:https://stackoverflow.com/a/61254557/135
我在 RHEL 上安装了 jenkins (localhost:8080)，我能够成功地构建代码 现在，我想设置主/从代理。 我的笔记本电脑将充当“Master Jenkins”，而我同事的笔记本电脑
我有这种方法可以根据我使用的 EXTRA_STREAM 共享文本文件或图片。我有这两个我可以选择 i.putExtra(Intent.EXTRA_STREAM, uri); i.putExtra(In
我正在使用 R 中的一个数据分析项目，我正在使用 R 中的敏感私有(private)数据进行一些逻辑和多级建模。我爱上了 。预订 包，我已经创建了一本关于我们的工作流程和分析管道的相当广泛的书。问题是
我正在构建的应用程序需要在 UITabBarController 框架内为多个 View (及其 subview )显示共享的自定义 UIToolbar。自定义工具栏的内容在所有 View 中都是相同
我有多个应用程序，我想共享相同的 eslint 配置: - project_root/ - app1/ - node_modules/ - eslint.rc
我有多个 Electron 应用程序。一个是主应用程序，其他几个功能应用程序。主应用程序上的按钮很少，这将导致功能应用程序打开。这里的问题是每个应用程序都有一个主进程，该进程导致要利用更多的CPU。是
我正在开发一个 Node.js 后端，它通过 websocket 与一些桌面客户端进行通信，而服务器端的通信是从 Web 前端发起的。一切正常，因为我将 SockJS Connection 实例存储在
我对托管多个网站的服务器上的多个用户帐户使用私有(private) SSH key 和无密码条目。 我为每个用户帐户使用相同的私钥。 (因为我很懒？或者那是“正确”的方式)。 我现在想授权该国不同地区
我是一名优秀的程序员,十分优秀！