控制器之间的AngularJS共享方法

一尘不染

控制器之间的AngularJS共享方法

angularjs

我正在阅读有关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>

我希望有人能告诉我我想念的东西才能完成这项工作。我叉了个笨蛋。

阅读 198

2020-07-04

共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并使用demoApp1inside中定义的任何服务demoApp2。查看我已更新的插件，以演示您的要求。

2020-07-04