个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 Angular 新手，仍在学习中。
这是sample fiddle 。
我想知道如何将其转换为服务？我发现在 NavController 和 HeaderController 上同时编写 setStatus 似乎很错误，有没有更好的方法来解决这个问题？
场景
当用户点击close按钮时，整个带背景的nav将不会显示，而当用户点击menu按钮时，nav将获得一个is-active类，它使nav显示 block 。
JS
var app = angular.module('myapp', ['ngRoute']);
app.controller('NavController', function($rootScope, $scope) {
$rootScope.status = 'off';
this.setStatus = function(status) {
$rootScope.status = status;
};
});
app.controller('HeaderController', function($rootScope, $scope) {
this.setStatus = function(status) {
$rootScope.status = status;
};
});
DOM
<div ng-app="myapp">
<nav ng-controller="NavController as nav" ng-class="{ 'is-active': status == 'on' }" ng-init="nav.status" class="nav">
<div class="nav__wrapper">
<button ng-click="nav.setStatus('off')" class="nav__close">close</button>
</div>
</nav>
<header ng-controller="HeaderController as header">
<button ng-click="header.setStatus('on')">menu</button>
</header>
</div>
任何帮助将不胜感激，谢谢!
最佳答案
有几个原因导致了 JSFiddle 上的问题
onload它在模块 myapp 之前解析脚本已定义，因此 LoadType JSFiddle 上应该是 No Wrap-in<body> 我纠正了这些问题并且您的 JSFiddle 工作顺利;)
现在，关于将公共(public)/可共享数据移动到工厂/服务的实际问题是通过创建如下所示的简单工厂模块并引用所有 Controller 来实现的
JS 代码:
myApp.factory('Data', function () {
return { FirstName: '' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
HTML 代码:
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName">
<br>Input is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
Input should also be here: {{Data.FirstName}}
</div>
Live Demo using factory/service @ JSFiddle
注意:使用 $rootScope像在当前代码中一样定义全局对象本身是一种不错的做事方式，但无论如何可以使用定义新的 factory 来实现相同的目的。像上面的模块。
引用文献:
关于javascript - 如何将 Angular 中的 rootScope 更改为 Service？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34528393/
26
4
0
为什么在此示例中需要 $rootScope.$apply() 来使用页面上的 ng-hide 更新元素？ 根据我的经验，每当我将 $scope.$apply() 放入 $scope.$watch 中时
$rootScope 和$rootScope.$root 有区别吗？ 有什么区别 $rootScope.global.flag = true 和 $rootScope.$root.global.fla
我想在我的应用程序中共享这些功能，而我的工厂很少。问题是我必须在需要时在每个 Controller 中添加所有这些工厂。随着工厂和 Controller 数量的增加，这是一项乏味的任务! 因此我试图找
我在 $rootScope 上定义了一个方法 $rootScope.method = function(value){ // wanna give this value to `$scope.
我想知道我是否可以在 $rootScope.$on 函数中调用 $rootScope.$emit，原因是我有两个 Controller ctrl1.js 和`ctrl2.js,我想在我的 ctrl1.
谁能帮助理解 $rootScope.$new() 和 $rootScope.$new(true) 之间的区别？根据我的理解，它们应该是相同的，因为 $rootScope 没有父作用域。 最佳答案 $n
在广播和接收广播方面， Angular 1.2 rc2 和 Angular 1.2 之间有什么变化吗？ 我有我认为是 $watch Controller 中的标准广播，即 $scope.$wa
我在我的应用程序中将 UI-router 用于嵌套 View ，但同时我想在路由更改时监听事件。在使用 UI-router routeChangeSuccess 之前，它触发得很好，但在 ui-rou
嗨，我想知道在性能方面什么更好。 假设我有一个广播东西的工厂: angular.module('core.foo') .factory('Foo', ['$rootScope',
我在 App.run 中定义了一些模型下面我在 Controller 中覆盖 someCtrl : App.run(['$rootScope', function($rootScope) { $r
我的应用出现以下错误 Error: [$rootScope:infdig] http://errors.angularjs.org/1.4.1/$rootScope/infdig?p0=10&p1=%
在一个 Controller 中，我这样做: $rootScope.$emit("newAction", {}); 在另一个 Controller 我做: $rootScope.$on('newAct
我想将数据从一个 Controller 发送到另一个 Controller 。其实我已经关注了这个link 我的第一个 Controller 是这样的: class ProductCtrl const
用户注销后，我需要清理我的 $rootScope。我试过 $rootScope.$destroy()但这并没有奏效。有没有办法遍历 $rootScope 中的所有值并删除它们或简单地重置它的方法？ 最
抱歉，我的英语不好。我有 angularjs 应用程序，有很多页面和表单。对于任何页面，使用该页面的模型创建文件。示例: file userDict.js: $rootScope.dicts.user
当互联网不可用时，我想在每个页面上显示互联网不可用栏。 我正在使用 Ionic 框架，因此决定将代码保留在 menu.html 上 这是我的菜单 html 代码 Internet not availa
我在我的 Controller $rootScope.$on 函数中监听用户登录 $rootScope.$on('$firebaseSimpleLogin:login',functio
我在 Controller 中使用 $rootScope.$on 来监听我正在使用的模块(Angular-packery)发出的事件。它正在工作，它获取事件并且我可以在“args”上执行操作。但我想做
以下文件“有效”(即它不会引发任何错误): angular.module("modx", [], function($routeProvider) {
我有一个更新 $rootScope 的 Angular 服务。更新实际上工作正常，但它在控制台中抛出一个错误，这让我很担心。 app.service("scroll", function($rootS
我是一名优秀的程序员,十分优秀！