Angularjs在控制器之间共享方法

Question

我正在阅读关于Angular验证的这篇文章,并认为在我自己的项目中使用它会很好.它的工作非常好,我希望在成功验证表单后扩展它访问其他控制器中的方法.我尝试了各种方法,但我似乎无法看到$ scope对象中的方法.

<!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>

我希望有人可以告诉我我缺少什么才能使这项工作.我分叉了一个傻瓜.

Answer 1

这样做的正确方法是使用角度服务.例如:

app.factory('svc', function () {
    var msg="original...";
    return {
        setMessage: function(x) {
            msg=x;
        },
        getMessage: function() {
            return msg;
        }
    };
});

这样您就可以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.

编辑

如果您想在另一个应用程序中使用一个应用程序的服务或控制器,只需引用主应用程序中的依赖项,并在第二个应用程序内调用主应用程序中定义的服务.如果你的主要应用程序被称为demoApp1,那么你可以创建一个名为另一个应用程序dempApp2和参考demoApp1的demoApp2,并使用定义的任何服务demoApp1里面demoApp2.看到插件我已经更新它以证明你在问什么.