Angularjs sharing methods between controllers

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.

Answers


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.


The best approach for you to communicate between the two controllers is to use events.

Scope Documentation

In this check out $on, $broadcast and $emit.

In general use case the usage of angular.element(catapp).scope() was designed for use outside the angular controllers, like within jquery events.

Ideally in your usage you would write an event in controller 1 as:

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

And in the second controller you'd just do

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

Can you try including the firstApp module as a dependency to the secondApp where you declare the angular.module. That way you can communicate to the other app.


Need Your Help

How to insert values into VB.NET Dictionary on instantiation?

vb.net dictionary c#-to-vb.net

Is there a way that I can insert values into a VB.NET Dictionary when I create it? I can, but don't want to, do dict.Add(int, "string") for each item.

How do you get the contextPath from JavaScript, the right way?

javascript jsp servlets

Using a Java-based back-end (i.e., servlets and JSP), if I need the contextPath from JavaScript, what is the recommended pattern for doing that, any why? I can think of a few possibilities. Am I