[英]Angular share data between controllers and components
I'm new on a project and trying to add a small feature.我是一个项目的新手,正在尝试添加一个小功能。
I have 2 views, Cars.html
and Wheels.html
我有 2 个视图,
Cars.html
和Wheels.html
Cars.html has a controller Cars.controller.js
Cars.html 有一个控制器
Cars.controller.js
Wheels.html has a component Wheels.component.js
Wheels.html 有一个组件
Wheels.component.js
I want to communicate between these two controllers.我想在这两个控制器之间进行通信。 I have tried directly injecting them into each other, but that causes a bunch of 'Provider errors'.
我曾尝试将它们直接相互注入,但这会导致一堆“提供程序错误”。
Through research online, it seems like I need a 'service' that gets injected by my controller and component ... then I can make function calls between the two.通过在线研究,似乎我需要一个由我的控制器和组件注入的“服务”……然后我可以在两者之间进行函数调用。 Doing this resolves the provider errors, but I can't seem to access the
howDoIgetHere
function.这样做可以解决提供程序错误,但我似乎无法访问
howDoIgetHere
函数。
Here is what they look like:这是它们的样子:
Cars.controller.js汽车控制器.js
angular.module('Cars')
.controller('CarsCtrl', CarsCtrl);
CarsCtrl.$inject = ['PartsViewModel'];
function CarsCtrl(PartsViewModel) {
var ctrl = this;
// This will fail
ctrl.goToParts = PartsViewModel.howDoIgetHere();
};
Wheels.component.js轮子组件.js
angular.module('Cars')
.component('wheels', {
bindings: { wheel: '=' },
controller: 'WheelsCtrl',
templateUrl: 'path/to/component/Cars/Wheels/Wheels.component.html'
})
.controller('WheelsCtrl', WheelsCtrl);
WheelsCtrl.$inject = [];
function WheelsCtrl() {
var ctrl = this;
// This will fail
ctrl.goToParts = PartsViewModel.howDoIgetHere();
}
PartsViewModel.service.js PartsViewModel.service.js
angular.module('Cars')
.factory('PartsViewModel', partsViewModelFactory);
partsViewModelFactory.$inject = ['Some', 'injected', 'Dependencies'];
function partsViewModelFactory(Some, injected, Dependencies) {
return PartsViewModel;
function PartsViewModel(part) {
this.howDoIgetHere = function() {
console.log('Success! From Cars controller or Wheels component.')
};
}
}
Cars.html汽车.html
<div>
<button ng-click="ctrl.goToParts()"></button>
</div>
Wheels.html轮子.html
<div>
<button ng-click="$ctrl.goToParts()"></button>
</div>
First, in your controller it should be this.goToParts = PartsViewModel().howDoIgetHere;
首先,在你的控制器中它应该是
this.goToParts = PartsViewModel().howDoIgetHere;
Second, in your service, the return statement should go after the function declaration.其次,在您的服务中,return 语句应该在函数声明之后。
edit: Sorry I misread what was causing the provider errors.编辑:抱歉,我误读了导致提供程序错误的原因。
Edit 2:编辑2:
If you're trying to access the same data set, you are defeating the purpose by creating a new instance of the PartsViewModel each time.如果您尝试访问相同的数据集,则每次都创建 PartsViewModel 的新实例,这违背了目的。
Change The partsviewmodel service to:将 partsviewmodel 服务更改为:
angular.module('mymodule').service('PartsViewService', PartsViewService);
function PartsViewService(){
var howDoIGetHere = function(){
Console.log('here');
};
return {
howDoIGetHere : howDoIGetHere
}
}
Then when accessing the injected service in your controllers.然后在您的控制器中访问注入的服务时。
this.goToParts = PartsViewService.howDoIGetHere;
Third, make sure that the provider error isn't caused by you misspelling the service name.
第三,确保提供者错误不是由您拼错服务名称引起的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.