All geek questions in one place

Angular JS only runs one controller when I used multiple controllers on the same page

The problem when working with two controllers How do I participate in angular Js, this is where I got my confusion

I wrote two applications with two different applications and controllers and applications as I found out, we can define several of them on one 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 such as

<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 problem

enter image description here

+4
source share
5 answers

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

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

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

+3
source

AngularJS HTML- . ngApp, , . HTML, angular.bootstrap.

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

ng-, (, myApp),

+4

. . :

  • -
    • --1
    • --2

. 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;
  };
});
+1

, .

: 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;
        };
    });
0

, bootstrapper . , , .

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

.

<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>
Hide result
0

Source: https://habr.com/ru/post/1669151/

More articles:


All Articles