javascript - 第二个 Controller 在我的 Angular js 中不起作用

Question

我搜索了所有有关如何拥有两个 Controller 的信息，但它不起作用。我的 HTML 有什么问题吗？我的脚本有什么问题吗？

Javascript 代码:

<script>

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = [];
$scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
        $scope.products.push($scope.addMe);
    } else {
        $scope.errortext = "The item is already in your shopping list.";
    }
}
$scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
}
});


var topics = angular.module("myList", []);
topics.controller("topicCtrl", function($scope) {
$scope.products = [];
$scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
        $scope.products.push($scope.addMe);
    } else {
        $scope.errortext = "The item is already in your shopping list.";
    }
}
$scope.removeItem = function (y) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
}
});

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

function addElement(value)
{
var dropdown = document.getElementById("OperationType");
  var current_value = dropdown.options[dropdown.selectedIndex].value;

  if (current_value == "Others") {
      document.getElementById("OperationNos").style.display = "block";
  }
  else {
    document.getElementById("OperationNos").style.display = "none";
}
}

 function addElement2(value)
{
var dropdown = document.getElementById("topic");
  var current_value = dropdown.options[dropdown.selectedIndex].value;

  if (current_value == "Others") {
      document.getElementById("usr").style.display = "block";
  }
  else {
    document.getElementById("usr").style.display = "none";
  }
}

HTML 代码:

<!--STANDARDS -->
<td>
   <div ng-app="myShoppingList" ng-controller="myCtrl" id="app1" class="panel panel-default" style="max-width:400px;">

    <div class="panel-heading">
        <h3>
            <select name="type" class="form-control" id="OperationType" onchange="addElement(this.value)" name="location">
                    <option value="Teacher">Teacher</option>
                    <option value="Coordinator">Coordinator</option>
                    <option value="Others">Others</option>
            </select>
            <input type="text" id="OperationNos"style="border: none;"class="form-control" placeholder="Input Title" value="{{x}}" >
        </h3>
    </div>

      <div class="panel-body">
        <ul class="list-group">
          <li ng-repeat="x in products" class="list-group-item">
            <input type="text" style="border: none;"class="form-control" value="{{x}}" id="usr">
            <span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span>
          </li>  
        </ul>
      </div>

      <div class="panel-footer">
        <div class="row">
          <div class="col-md-12">
             <div class="input-group">
                <input type="text" class="form-control" ng-model="addMe" placeholder="Add description">
                <span class="input-group-btn">
                  <button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button>
                </span>
              </div>
            </div>
          </div>
          <p class="w3-padding-left w3-text-red">{{errortext}}</p>
        </div>
      </div>
</td>
<!-- END OF STANDARDS -->
<!--TOPICS -->
<td>
    <div ng-app="myList"   ng-controller="topicCtrl" id="app2" class="panel panel-default" style="max-width:400px;">

      <div class="panel-heading">
        <h3>
        <select name="type" class="form-control" id="topic" onchange="addElement2(this.value)" name="topic">
                <option value="Teacher">Teacher</option>
                <option value="Coordinator">Coordinator</option>
                <option value="Others">Others</option>
              </select>
        <input type="text" id="topics"style="border: none;"class="form-control" placeholder="Input Title" value="{{y}}" ></h3>
      </div>

      <div class="panel-body">
        <ul class="list-group">
          <li ng-repeat="y in products" class="list-group-item">
            <input type="text" style="border: none;"class="form-control" value="{{y}}" id="usr">
            <span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span>
          </li>  
        </ul>
      </div>

      <div class="panel-footer">
        <div class="row">
          <div class="col-md-12">
             <div class="input-group">
                <input type="text" class="form-control" ng-model="addMe" placeholder="Add description">
                <span class="input-group-btn">
                  <button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button>
                </span>
              </div>
            </div>
          </div>
          <p class="w3-padding-left w3-text-red">{{errortext}}</p>
        </div>
      </div>
</td>
<!-- END OF TOPICS -->

Answer 1

查看 angularjs 文档

• 只有一个 AngularJS 应用程序可以为每个 HTML 文档自动引导。在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。
• 要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。
• AngularJS 应用程序不能相互嵌套。
• 不要使用在与 ngApp 相同的元素上使用嵌入的指令。这包括 ngIf、ngInclude 和 ngView 等指令。这样做会错放应用 $rootElement 和应用的注入(inject)器，导致动画停止工作并使注入(inject)器无法从应用外部访问。