Javascript 在控制器AngularJS之间共享函数

Javascript 在控制器AngularJS之间共享函数,javascript,angularjs,Javascript,Angularjs,我假设这是非常简单的,但是如何通过将函数存储在“.run”阶段,在控制器中获得可以访问的全局函数呢 非常简单,在DOM中单击一个按钮,该按钮触发在相应控制器中调用的全局函数 我已经尝试过各种方法,并且希望有一种非常简单的方法来实现这一点,这有助于最大限度地减少我目前获得的代码量。见下文: **HTML** <input data-ng-click="clearSignInError()" data-ng-model="email" type="email" id="inputEmail

我假设这是非常简单的,但是如何通过将函数存储在“.run”阶段,在控制器中获得可以访问的全局函数呢

非常简单,在DOM中单击一个按钮,该按钮触发在相应控制器中调用的全局函数

我已经尝试过各种方法,并且希望有一种非常简单的方法来实现这一点,这有助于最大限度地减少我目前获得的代码量。见下文:

**HTML**

<input data-ng-click="clearSignInError()" data-ng-model="email" 
type="email"
id="inputEmail" class="form-control" placeholder="Email address"   
required>

**JS**

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScopecope.clearSignInError = function () {
        $rootScope.loginError = null;
        $rootScope.loginSuccess = null;
    };

}]);

app.controller('loginCtrl', ['$scope', 'Auth', '$state', '$rootScope'
    function($scope, Auth, $state, $rootScope) {

    $rootScope.clearSignInError()

}]);
**HTML**
**JS**
运行(['$rootScope','$state',函数($rootScope,$state){
$rootScopeScope.ClearSignError=函数(){
$rootScope.login错误=null;
$rootScope.loginsucess=null;
};
}]);
app.controller('loginCtrl',['$scope','Auth','$state','$rootScope'
函数($scope,Auth,$state,$rootScope){
$rootScope.clearsignError()
}]);

您的最佳选择可能是使用服务或工厂,然后在整个应用程序中需要时将它们作为依赖项注入

编辑:在这个plunkr中添加了一个示例服务

app.service('AuthService',function(){
this.loginsAccess=函数(){
//当登录成功时做一些事情
}
this.login错误=函数(){
//在此处处理登录错误
}
this.clearLoginError=函数(){
log(“清除登录错误”);
警报(“清除登录错误”);
}
});
//修改了你的控制器
app.controller('loginCtrl',['$scope','Auth','AuthService','$state','$rootScope',函数($scope,Auth,AuthService,$state,$rootScope){
$scope.ClearSignError=AuthService.clearLoginError;
}]);
**HTML**

您可以使用工厂,而不是与rootScope连接。通过这种方式,您可以将工厂作为依赖项包含在所需的任何控制器中。下面是一个视频演示,可以帮助您开始:


在我现在查看之前,您可以使用出厂或注射控制器!虽然我一定是弄错了,但我还是尝试了工厂选项。基于我上面的代码,我如何才能实现设置服务所需的功能?当用户单击输入框返回时,我只是删除了错误表单提交后屏幕上的一个错误。虽然我在控制器中的$scope.ClearSignError()下得到了一条红线,但我只是在尝试新代码?很抱歉,该行应该是
$scope.ClearSignError=AuthService.clearLoginError()和HTML应该是
data ng click=“ClearsignError”
恐怕还是不走运,我尝试了以下方法:'app.service('AuthService',function(){this.ClearsignError=function($scope.loginError=null;$scope.LoginsAccess=null;};});'在我的控制器中:“$scope.ClearSignError=AuthService.ClearSignError();”我已经用一个plunkr为您更新了我的答案,这样您就可以看到它的作用。如果是这样,我假设我不需要在工厂中使用所有这些代码:$rootScope.ClearsignError=function(){$rootScope.loginError=null;$rootScope.LoginAccess=null;};。相反,我将使用$scope.loginError=null$scope.loginsucess=null;并将其存储在控制器中使用$scope调用的函数中。ClearSignError?是。您可以这样做。但这不是使用$scope.clearsignError调用的。它是用你的工厂名来调用的。我现在正在尝试这个方法,但我还在现有工厂中为另一个函数使用另一个“return”方法。出于某种原因,它在“return”方法的开头说“unreachable code”(不可访问的代码)——其他一切似乎都很好,但只是想在尝试之前先检查一下这个问题。
app.service('AuthService', function() {
    this.loginSuccess = function() {
        // do stuff when login is successful
    }

    this.loginError = function() {
        // handle login errors here
    }

    this.clearLoginError = function() {
        console.log("Clear Login Error");
        alert("Clear Login Error");
    }
});

// modified your controller
app.controller('loginCtrl', ['$scope', 'Auth', 'AuthService', '$state', '$rootScope', function($scope, Auth, AuthService, $state, $rootScope) {

    $scope.clearSignInError = AuthService.clearLoginError;

}]);

**HTML**
<input data-ng-click="clearSignInError()" data-ng-model="email"
type="email" id="inputEmail" class="form-control" placeholder="Email address" required>