Angular 当我在一个页面中使用多个控制器时，JS 只有一个控制器工作

Question

处理两个控制器时出现问题作为 angular Js 的学习者，我就是从这里得到我的困惑

我用两个不同的应用程序和控制器和应用程序写了两个据我所知，我们可以在一个页面中定义多个。

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

当我像这样使用两个控制器时

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

这就是问题所在

Answer 1

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.

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

您的示例中有两个 ng-app，将两个控制器放在同一个模块（例如 myApp）中就可以了

Answer 2

为您的第二个 div 提供一个 ID 并添加此行：

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

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

Answer 3

这不是标准做法。您基本上是在同一页面上使用两个应用程序模块。您应该使用如下格式：

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

我做了以下fiddle供您查看。 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;
  };
});

Answer 4

您应该将控制器绑定到同一个应用程序，而不是创建单独的应用程序。

看到这个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;
        };
    });

Answer 5

诀窍是使用 bootstrapper 到 bootstrap 第二个或第三个应用程序。另外，这必须在定义之后完成。

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>

Angular 当我在一个页面中使用多个控制器时，JS 只有一个控制器工作

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

html

javascript

angularjs

angular-controller