Question

处理两个控制器时出现问题作为角度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

每个HTML只能自动引导一个AngularJS应用程序文献。文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要运行多个 HTML文档中的应用程序必须手动引导它们使用angular.bootstrap代替。

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

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

纳克应用内
- 纳克控制器-1
- 纳克控制器-2

我做了以下小提琴让你复习。 https://jsfiddle.net/kaminasw/U3pVM/29864/

<强> HTML

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

<强> JS

settings.json

Answer 4

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

看到这个小提琴： 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 来引导第二个或第三个应用程序。此外，必须在定义之后完成。

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只有一个控制器工作

5 个答案: