Question

只有第一个ng-app有效：请参阅我的plunker

如何让两个应用程序协同工作？我知道我应该用一条线来引导模块，我不确定在哪里添加该行。

HTML

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
  <script src="clientsearch.js"></script>
  <script src="datepicker.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">


    <div ng-app="ui.bootstrap.demo">
    <div ng-controller="DatepickerDemoCtrl">
        <div class="row">
           <div class="col-md-6">
                <label for="appointment_start">Appointment start:</label>
                <p class="input-group">
                  <input type="text" id="appointment_start" name="appointment_start" class="form-control" readonly datepicker-popup="{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
                </p>

           </div>
      </div>
    </div> <!-- ng-controller -->
    </div> <!-- ng-app -->



    <div id="appclientcomplete" ng-app="ui.bootstrap.clientautocomplete">
    <div ng-controller="TypeaheadCtrl">
     <div class="row">
        <h4>Static arrays</h4>
        <pre>Model: {{selected | json}}</pre>
        <input type="text" placeholder="Type client's name, address or phone number" ng-model="selected" typeahead="client as client.first_name + ' ' + client.last_name + ' ' + client.address_1 + ' ' + client.address_2 + ' ' + client.city  for client in clients | filter:$viewValue | limitTo:8" class="form-control">
      </div>
    </div> <!-- ng-controller -->
    </div> <!-- ng-app -->


    </div>  
</body>

datepicker.js

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('DatepickerDemoCtrl', function ($scope) {


});

clientsearch.js

angular.module('ui.bootstrap.clientautocomplete', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.clientautocomplete').controller('TypeaheadCtrl', function($scope, $http) {


});

Answer 1

如果我没有弄错的话，Angular只会引导它遇到的第一个<div class="action_box">asdasds</div> <div class="action_box">asdasds</div> <div class="action_box">asdasds</div> <div class="action_box">asdasds</div> <div class="action_box">asdasds</div>。您应该只使用一个应用程序（模块），但您可以轻松创建一个使用其他两个模块的模块。

ng-app

AngularJS单页内的多个ng-app

1 个答案: