控制器之间的Angularjs共享方法
[英] Angularjs sharing methods between controllers
本文介绍了控制器之间的Angularjs共享方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在阅读这篇文章关于 Angular 验证，并认为在我自己的项目中使用会很好.它工作得非常好，我想在成功验证表单后扩展它访问其他控制器中的方法.我尝试了各种方法来做到这一点，但我似乎看不到 $scope 对象中的方法.
<头><link data-require="bootstrap-css@3.0.0"数据-semver="3.0.0"rel="样式表"href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/><script data-require="angular.js@1.0.8"数据-semver="1.0.8"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><script src="rcSubmit.js"></script><script src="loginController.js"></script><script src="loginApp.js"></script><身体><div class="容器"><div class="row"><div class="col-xs-12 col-sm-6 col-sm-offset-3"><h1>简单的登录表单</h1><form name="loginForm" novalidateng-app="登录应用程序" ng-controller="登录控制器"rc-submit="登录()"><div class="form-group"ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}"><input class="form-control" name="username" type="text"placeholder="用户名" 需要 ng-model="session.username"/><span class="help-block"ng-show="loginForm.username.$error.required">必需</span>
<div class="form-group"ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}"><input class="form-control" name="password" type="password"placeholder="密码" 需要 ng-model="session.password"/><span class="help-block"ng-show="loginForm.password.$error.required">必需</span>
<div class="form-group"><button type="submit" class="btn btn-primary pull-right"value="登录" title="登录"><span>登录</span>
</表单>
</html>
我希望有人能告诉我我缺少什么以使这项工作顺利进行.我已经分叉了一个 plunkr.
解决方案
正确的方法是使用 Angular 服务.例如:
app.factory('svc', function () {var msg="原始...";返回 {设置消息:函数(x){味精=x;},获取消息:函数(){回消息；}};});
通过这种方式，您可以在您注入 svc 的任何控制器中访问 svc 内的功能:
app.controller("ctrl1",function($scope,svc,$timeout){$scope.someText=svc.getMessage();$scope.$watch("someText",function(v){svc.setMessage(v);});});app.controller("ctrl2",function($scope,svc){$scope.msg=svc.getMessage();$scope.$watch(svc.getMessage,function(v){$scope.msg=v;});});
参见 这个演示 plunk(我忽略了你提供的那个 plunk，因为它有很多噪音).
编辑
执行服务方法和表单验证并没有真正相互关联，见plunk.
编辑
如果您想在另一个应用程序中使用一个应用程序的服务或控制器，只需引用主应用程序中的依赖项并在第二个应用程序中调用主应用程序中定义的服务.如果您的主应用程序名为 demoApp1，那么您可以创建另一个名为 dempApp2 的应用程序并在 demoApp2 中引用 demoApp1 和在 demoApp2 中使用 demoApp1 中定义的任何服务.请参阅我更新的 plunk 以演示您的要求.
I was reading this article on Angular validation and thought it would be good to use in my own project. It's working really well and I'd like to extend it accessing methods in other controllers upon successful validation of the form. I've tried various ways of doing this but I can't seem to see the methods in the $scope object.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.0.0"
data-semver="3.0.0"
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.0.8"
data-semver="1.0.8"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="rcSubmit.js"></script>
<script src="loginController.js"></script>
<script src="loginApp.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<h1>Simple Login Form</h1>
<form name="loginForm" novalidate
ng-app="LoginApp" ng-controller="LoginController"
rc-submit="login()">
<div class="form-group"
ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">
<input class="form-control" name="username" type="text"
placeholder="Username" required ng-model="session.username" />
<span class="help-block"
ng-show="loginForm.username.$error.required">Required</span>
</div>
<div class="form-group"
ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">
<input class="form-control" name="password" type="password"
placeholder="Password" required ng-model="session.password" />
<span class="help-block"
ng-show="loginForm.password.$error.required">Required</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right"
value="Login" title="Login">
<span>Login</span>
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I was hoping that someone can tell me what I'm missing in order to make this work. I've forked a plunkr.
解决方案
The proper way to do this would be with an angular service. For example:
app.factory('svc', function () {
var msg="original...";
return {
setMessage: function(x) {
msg=x;
},
getMessage: function() {
return msg;
}
};
});
This way you can access the fucntions inside svc in any controller that you inject svc into:
app.controller("ctrl1",function($scope,svc,$timeout){
$scope.someText=svc.getMessage();
$scope.$watch("someText",function(v){
svc.setMessage(v);
});
});
app.controller("ctrl2",function($scope,svc){
$scope.msg=svc.getMessage();
$scope.$watch(svc.getMessage,function(v){
$scope.msg=v;
});
});
See this demo plunk (I ignored that plunk you provided because it had a lot of noise).
EDIT
Executing the service method and form validation are not really related to each other, see plunk.
EDIT
If you want to use the services or controllers of one app inside another, just reference the dependencies in your main app and call the services defined in your main app inside your second app. If your main app is called demoApp1, then you could create another app called dempApp2 and reference demoApp1 in demoApp2 and use any services defined in demoApp1 inside demoApp2. See the plunk I've updated it to demonstrate what you're asking.
这篇关于控制器之间的Angularjs共享方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
