Sharing methods between controllers in AngularJS

Question

Sharing methods between controllers in AngularJS

After coming across this insightful article on Angular validation, I decided to implement it in my project. The validation is functioning perfectly, but I am struggling to access methods in other controllers upon successful form validation. Despite trying various approaches, I am unable to see the methods in the $scope object.

<!DOCTYPE html>
<html>
  <head>
    <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9a4eafafac9baa7b9a7b9">[email protected]</a>" 
      data-semver="3.0.0" 
      rel="stylesheet" 
      href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8e81889a838e9dc1859cafdec1dfc1d7">[email protected]</a>" 
      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 am reaching out for assistance to identify the missing element that will enable me to achieve my objective. For reference, I have shared a link to a plunkr.

javascript angularjs

Answer 1

Answer №1

To effectively handle this, utilizing an angular service is the best approach. Consider the following:

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

By doing this, you can utilize the functions within svc in any controller where you inject 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;
  });
});

Check out this demonstration plunk (I didn't address the plunk you shared initially due to excessive noise).

UPDATE

Executing the service method and form validation are not directly connected, as shown in this plunk.

UPDATE

If you wish to utilize the services or controllers from one app in another, simply reference the dependencies in your primary app and use the services defined in the main app within your secondary app. If your main app is named demoApp1, you can create another app called demoApp2, reference demoApp1 in demoApp2, and use any services defined in demoApp1 within demoApp2. Refer to the updated plunk to see an example of what you're inquiring about.

Answer 2

To effectively handle this, utilizing an angular service is the best approach. Consider the following:

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

By doing this, you can utilize the functions within svc in any controller where you inject 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;
  });
});

Check out this demonstration plunk (I didn't address the plunk you shared initially due to excessive noise).

UPDATE

Executing the service method and form validation are not directly connected, as shown in this plunk.

UPDATE

If you wish to utilize the services or controllers from one app in another, simply reference the dependencies in your primary app and use the services defined in the main app within your secondary app. If your main app is named demoApp1, you can create another app called demoApp2, reference demoApp1 in demoApp2, and use any services defined in demoApp1 within demoApp2. Refer to the updated plunk to see an example of what you're inquiring about.

Answer 3

Answer №2

The most efficient method for facilitating communication between the two controllers is by utilizing events.

For more information, you can refer to the Scope Documentation.

Be sure to explore the use of $on, $broadcast, and $emit.

Typically, the function angular.element(catapp).scope() is intended for situations outside of angular controllers, such as within jquery events.

In your scenario, you would create an event in controller 1 like this:

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

Then, in the second controller, you simply need to do:

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

Consider adding the firstApp module as a dependency to the secondApp when defining the angular.module. This will enable effective communication between the two applications.

Answer 4

The most efficient method for facilitating communication between the two controllers is by utilizing events.

For more information, you can refer to the Scope Documentation.

Be sure to explore the use of $on, $broadcast, and $emit.

Typically, the function angular.element(catapp).scope() is intended for situations outside of angular controllers, such as within jquery events.

In your scenario, you would create an event in controller 1 like this:

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

Then, in the second controller, you simply need to do:

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

Consider adding the firstApp module as a dependency to the secondApp when defining the angular.module. This will enable effective communication between the two applications.

Sharing methods between controllers in AngularJS

Answer №1

Answer №2

Similar questions

Vue (Gridsome) App encountering 'Cannot POST /' error due to Netlify Forms blocking redirect functionality

Enter your password using the text input field on Internet Explorer 8

My HTML gets rearranged by browsers, causing a change in appearance

Only one JSON file is handled at a time, no duplicates are made

Simple method for implementing a fade effect on a React component with raw JavaScript techniques?

CKeditor with Kcfinder

When ng-app has a value other than an empty string, the angular directives will fail to function as expected

Check the validity of multiple selection groups using JavaScript

Can you explain the functionality of the return false statement within the validate plugin's submitHandler

Having trouble accessing the href attribute after clicking on an <a> tag with JavaScript

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

Having trouble with expressJs router.post() not functioning properly with multiple middleware, resulting in an [object Undefined] error

Download the browser version of UglifyJS 2 now

Displaying API logs on an Html console

The react-native-video-controls package was used in React Native. When the onBack event was triggered, it successfully navigated back to the initial screen. However, upon returning

Updating the status of the checkbox on a specific row using Typescript in AngularJS

The customer opts to store all images indefinitely into the data stream

Issue: tanstack_react_query's useQuery function is not recognized

ng-options encounters duplicate data when using group by in Internet Explorer

Injecting Variables Into User-Defined Button