Question

我在一个页面中有两个AngularJS应用程序，我想知道为什么Angular会破坏然后意识到这可能是因为两个应用程序名称相同（我对AngularJS来说很新）。

如果需要改变以区分它们，我需要知道的是什么。

这是我的代码，其中两个应用分为不同的div NorthWest和NorthEast。

如果有人能帮助我，我将非常感激，

先谢谢！

<div id="NorthWest" class="desc">

                        <script>

                            var app = angular.module('myApp', []);
                            app.controller('regionsLinks', function($scope, $http) {

                            var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest';

                            $http.get(url).then(function (data) {

                            $scope.data = data.data;

                            });});

                            app.controller('regionsLinks1', function($scope, $http) {

                            var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast';

                            $http.get(url).then(function (data) {

                            $scope.data = data.data;

                            });});



                        </script>


            <div ng-app="myApp">

                <div ng-controller="regionsLinks">

                            <div ng-repeat="d in data">

                            <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>

                            <img src="{{d.acf.logo}}">

                                <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>

                                <div id="listing-address-1">

                                    {{d.acf.address_1}}, 


                                    {{d.acf.address_2}}


                                    {{d.acf.address_3}}


                                    {{d.acf.town}}

                                    {{d.acf.county}}

                                    {{d.acf.postcode}}

                                </div>

                                <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>

                                <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>

                                <div id="listing-email">Email: {{d.acf.email}}</div>

                                <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>

                                <div id="listing-established">Established: {{d.acf.established}}</div>

                                <div id="listing-about">About: {{d.acf.about}}</div>

                                <div id="listing-mailingaddress">

                                    Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, 
                                    {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}

                                </div>

                                <div id="listing-directions">Directions: {{d.acf.directions}}</div>

                                <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>

                        </div>



                    </div>



                <div id="NorthEast" class="desc">

                        <div ng-controller="regionsLinks1">

                            <div ng-repeat="d in data">

                            <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>

                                <div id="listing-address-1">

                                    {{d.acf.address_1}}, 


                                    {{d.acf.address_2}}


                                    {{d.acf.address_3}}


                                    {{d.acf.town}}

                                    {{d.acf.county}}

                                    {{d.acf.postcode}}

                                </div>

                        </div>



                    </div>

                </div>

            </div>

Answer 1

您可以在页面中拥有两个Angular应用程序，但其中只有一个可以是auto-bootstrapped with ng-app。

您可以bootstrapping them manually实例化您的应用（是的，给他们不同的，有意义的名字）。

在您的情况下，我认为只有一个应用程序包含两个控制器更有意义，一个用于NorthWest，另一个用于NorthEast。

Answer 2

对于这种情况，您可以只使用一个控制器，因为两个div块都需要相同的数据才能绑定。试试吧

  <script>
    var app = angular.module('myApp', []);
    app.controller('regionsLinks', function($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest';
      $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
  </script>

  <div ng-app="myApp" ng-controller="regionsLinks">
    <div id="NorthWest" class="desc">
      <div ng-repeat="d in data">
        <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>
        <img src="{{d.acf.logo}}">
        <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
        <div id="listing-address-1">
          {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
        </div>
        <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
        <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
        <div id="listing-email">Email: {{d.acf.email}}</div>
        <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
        <div id="listing-established">Established: {{d.acf.established}}</div>
        <div id="listing-about">About: {{d.acf.about}}</div>
        <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
        <div id="listing-directions">Directions: {{d.acf.directions}}</div>
        <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
      </div>
    </div>

  <div id="NorthEast" class="desc">
      <div ng-repeat="d in data">
        <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2>
        <div id="listing-address-1">
          {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
        </div>
      </div>
  </div>
</div>

在一个页面中使用两个AngularJS应用程序

2 个答案: