Методы совместного использования Angularjs между контроллерами

Я читал эту статью о проверке Angular и думал, что это будет полезно использовать в моем собственном проекте. Он работает очень хорошо, и я хотел бы расширить его доступ к методам в других контроллерах после успешной проверки формы. Я пробовал различные способы сделать это, но я не могу видеть методы в объекте $scope.

<!DOCTYPE html>
<html>
  <head>
    <link data-require="[email protected]" 
      data-semver="3.0.0" 
      rel="stylesheet" 
      href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="[email protected]" 
      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>

Я надеялся, что кто-то скажет мне, что мне не хватает, чтобы сделать эту работу. Я отклонил plunkr.

Ответы

Ответ 1

Правильный способ сделать это будет с помощью службы angular. Например:

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. Посмотрите на плунжер, который я обновил, чтобы продемонстрировать, что вы просите.

Ответ 2

Наилучшим подходом для общения между двумя контроллерами является использование событий.

Документация по области

В этом случае проверьте $on, $broadcast и $emit.

В общем случае использование angular.element(catapp).scope() предназначено для использования вне контроллеров angular, например, в событиях jquery.

В идеале в вашем использовании вы должны написать событие в контроллере 1 как:

$scope.$on("myEvent", function (event, args) {
   $scope.rest_id = args.username;
   $scope.getMainCategories();
});

И во втором контроллере вы просто выполните

$scope.initRestId = function(){
   $scope.$broadcast("myEvent", {username: $scope.user.username });
};

Можете ли вы попробовать включить модуль firstApp в качестве зависимости от secondApp, где вы объявляете angular.module. Таким образом, вы можете общаться с другим приложением.