AngularJS将对象从主控制器传递给其他控制器
我对安古拉杰和艾奥尼克都很陌生。我目前正在构建我的第一个应用程序，我想知道，有什么方法，我可以注入表达式在主控制器，并使用它们在所有其他控制器。
所以，不要在每个控制器中输入$scope、$http、$Ionicpopup。我想把它放在我的主控制器中，并在所有其他控制器中使用它们。
变量app=angular.module(‘app.Controller’，[])；
你能告诉我这叫什么吗？
回答 3
Stack Overflow用户
发布于 2016-07-22 02:57:01
我们通常使用服务在控制器之间进行通信。
在下面的示例示例中，我们创建animalService，并将其注入两个控制器。然后，我们使用$watch来监视更改。
http://plnkr.co/edit/hfKuxJO2XZdB6MsK7Ief
(function () {
angular.module("root", [])
.controller("leftAnimal", ["$scope", "animalService",
function ($scope, animalService) {
$scope.findNewAnimal = function () {
var randNum = Math.floor(Math.random() * animalPool.length);
$scope.animal = animalPool[randNum];
console.log("Left Click Index: " + randNum);
animalService.setAnimal(randNum);
};
$scope.$watch(function () {
return animalService.getAnimal();
}, function (value) {
$scope.animal = animalPool[value];
});
}
])
.controller("rightAnimal", ["$scope", "animalService",
function ($scope, animalService) {
$scope.findNewAnimal = function () {
var randNum = Math.floor(Math.random() * animalPool.length);
$scope.animal = animalPool[randNum];
console.log("Right Click Index: " + randNum);
animalService.setAnimal(randNum);
};
$scope.$watch(function () {
return animalService.getAnimal();
}, function (value) {
$scope.animal = animalPool[value];
});
}
])
.factory("animalService", [function () {
var index = 0;
function getAnimal() {
return index;
}
function setAnimal(newIndex) {
index = newIndex;
}
return {
getAnimal: getAnimal,
setAnimal: setAnimal,
}
}]);
var animalPool = [{
name: "Baby Quetzal",
img: "http://i.imgur.com/CtnEDpM.jpg",
baby: true
}, {
name: "Baby Otter",
img: "http://i.imgur.com/1IShHRT.jpg",
baby: true
}, {
name: "Baby Octopus",
img: "http://i.imgur.com/kzarlKW.jpg",
baby: true
}];
})();<!DOCTYPE html>
<html ng-app="root">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<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="app.js"></script>
</head>
<body>
<div class="row">
<div class="text-center">
<h2>Pick an Animal</h2>
</div>
<div ng-controller="leftAnimal" class="col-md-6">
<div class="animalImage">
<img class="img-center" ng-src="{{animal.img}}"/>
</div>
<div class="animalName">{{animal.name}}</div>
<div class="animalDescription">{{animal.description}}</div>
<button type="button" ng-click="findNewAnimal()"
class="btn btn-info img-center">
Change
</button>
</div>
<div ng-controller="rightAnimal" class="col-md-6">
<div class="animalImage">
<img class="img-center" ng-src="{{animal.img}}" />
</div>
<div class="animalName">{{animal.name}}</div>
<div class="animalDescription">{{animal.description}}</div>
<button type="button" ng-click="findNewAnimal()"
class="btn btn-info img-center">
Change
</button>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2016-07-22 02:54:30
在AngularJS中，必须将依赖项注入到每个控制器中。这样，每个控制器只具有它所需要的依赖项，而不是任何无关的依赖项。
线
var app=angular.module('app.controllers', []);就是如何告诉AngularJS您想要创建一个新模块。然后，要向模块添加内容，只需进行如下调用
app.controller('controllerName', function() {/* your stuff here */});
app.filter('filterName', function() {/* your stuff here */});Stack Overflow用户
发布于 2016-07-22 02:59:50
要创建自己的表达式并在代码的其他部分中使用它，请尝试如下所示：
var myApp=angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x'); // this sets a value然后，如果将clientId作为依赖项包含在任何地方，那么无论在何处注入它，它都等于a12345654321x。
要在其他地方使用您的值，只需将其作为依赖项来包含。
myApp.controller('mycontroller', ['clientId', function(clientId) {
console.log(clientId);
}]);对于更复杂的行为，您可以进入其他类型的AngularJS提供程序，如工厂。以下是参考的文档：https://docs.angularjs.org/guide/providers
https://stackoverflow.com/questions/38517361
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号