CODEWITHSUNDEEP
javascripthtmlangularjsangular-controller
KishanCS
KishanCS

Reputation: 1377

Angular JS only one controller working when i used multiple controllers in a single page

Problem in handling two controller As am a learner to angular Js this is where i got my confusion

I wrote two with two different apps and controllers and apps as I have learnt we can define multiple of these in a single page.

The first part div which is

<div ng-app="myApp" ng-controller="personCtrl">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{fullName()}}

</div>

worked well

enter image description here When I used with two controllers like this

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<br><br>


<div ng-app="myApp1" ng-controller="personCtrl1">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>


<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
var app1 = angular.module('myApp1', []);
app1.controller('personCtrl1', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

</body>
</html>

This is what the problem is

enter image description here

Upvotes: 4

Views: 1032

Answers (5)

Alok
Alok

Reputation: 1310

The trick is to use bootstrapper to bootstrap the second or third app. Also, this has to be done after it has been defined.

angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);

Here is a working example of your code. 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script>
  var app1 = angular.module('myApp', []);

  app1.controller('personCtrl', function($scope) {
    $scope.firstName = "";
    $scope.lastName = "";
    $scope.fullName = function() {
      return $scope.firstName + " " + $scope.lastName;
    }
  });

  var app2 = angular.module('myApp2', []);

  app2.controller('personCtrl', function($scope) {
    $scope.firstName = "";
    $scope.lastName = "";
    $scope.fullName = function() {
      return $scope.firstName + $scope.lastName;
    }
  });
</script>
<div ng-app="myApp" ng-controller="personCtrl" class="col-xs-6">
  First Name:
  <input type="text" ng-model="firstName">
  <br>Last Name:
  <input type="text" ng-model="lastName">
  <br>App 1: Full Name: {{fullName()}}
</div>
<div ng-app="myApp2" ng-controller="personCtrl" id="myApp2" class="col-xs-6">
  First Name:
  <input type="text" ng-model="firstName">
  <br>Last Name:
  <input type="text" ng-model="lastName">
  <br>App 2: Full Name: {{fullName()}}
</div>
<script>
  angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);
</script>

Upvotes: 0

Wekslie
Wekslie

Reputation: 124

You should bind the controllers to the same app, and not create seperate apps.

See this Fiddle: https://jsfiddle.net/q07scy6k/

HTML: 

<div ng-app="myApp">
    <div ng-controller="personCtrl">
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{fullName()}}
    </div>
    <br><br>
    <div ng-controller="personCtrl1">
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{fullName()}}
    </div>
</div>

Javascript:

    var app = angular.module('myApp', []);
    app.controller('personCtrl', function ($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        scope.fullName = function () {
            return $scope.firstName + " " + $scope.lastName;
        };
    });

    app.controller('personCtrl1', function ($scope) {
        $scope.firstName = "Jane    ";
        $scope.lastName = "Doe";
        $scope.fullName = function () {
            return $scope.firstName + " " + $scope.lastName;
        };
    });

Upvotes: 0

Tariq B.
Tariq B.

Reputation: 573

This is not the standard practice. You are basically using two application modules on the same page. You should instead have the format as following:

  • ng-app
    • ng-controller-1
    • ng-controller-2

I have made the following fiddle for you to review. https://jsfiddle.net/kaminasw/U3pVM/29864/

HTML

<div ng-app="myApp">
  <div ng-controller="personCtrl">

    First Name:
    <input type="text" ng-model="firstName">
    <br> Last Name:
    <input type="text" ng-model="lastName">
    <br>
    <br> Full Name: {{fullName()}}

  </div>

  <br>
  <br>


  <div ng-controller="personCtrl1">

    First Name:
    <input type="text" ng-model="firstName">
    <br> Last Name:
    <input type="text" ng-model="lastName">
    <br>
    <br> Full Name: {{fullName()}}

  </div>
</div>

JS

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});
app.controller('personCtrl1', function($scope) {
  $scope.firstName = "Jane";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});

Upvotes: 1

a.u.b
a.u.b

Reputation: 1609

Give an id to your second div and add this line: 

angular.bootstrap(document.getElementById("myApp1"), ['myApp1']);

http://jsfiddle.net/ADukg/9952/

Upvotes: 4

Rui
Rui

Reputation: 4886

only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.

From https://docs.angularjs.org/api/ng/directive/ngApp

You have two ng-app in your example, put both controllers in the same module (for example myApp) and you'll be fine

Upvotes: 4

Related Questions