在一页中使用两个AngularJS应用

露西·布朗

我在一个页面中有两个AngularJS应用程序,我想知道为什么Angular崩溃了,然后才意识到这可能是因为两个应用程序都具有相同的名称(我对AngularJS很陌生)。

如果这有意义,我需要知道是否需要更改以区别它们。

这是我的代码,其中两个应用程序分别位于divNorthWestNorthEast

如果有人可以帮助我,我将非常感激,

提前致谢!

<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>
亚伦·史威默(Yaron Schwimmer)

您可以在页面中拥有两个Angular应用程序,但是其中只有一个可以自动引导ng-app

您可以通过手动引导应用来实例化您的应用(是的,给它们提供不同的有意义的名称)

对于您的情况,我认为只有一个带有两个控制器的应用程序更有意义,一个控制器用于NorthWest一个控制器NorthEast

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在ChakraUI中使用useDisclosure()无法在同一页面上使用两个模式

来自分类Dev

在同一页面中使用两个控制器

来自分类Dev

如何在C#中从另一页发送的URL中使用两个值?

来自分类Dev

使用AngularJS在同一页面中的两个D3.js图

来自分类Dev

如何使用会话将两个值从一页传递到php中的另一页

来自分类Dev

同一页面中的两个ui视图AngularJs

来自分类Dev

同一页面中的两个ui视图AngularJs

来自分类Dev

Angular两个应用程序在同一页面上

来自分类Dev

一页上有两个sidenav只能使用一个

来自分类Dev

一页上有两个分析

来自分类Dev

在一页jQuery上显示两个轮播

来自分类Dev

一页中加载两个js函数

来自分类Dev

在一页上链接两个Bootstrap Carousels

来自分类Dev

同一页上的两个滑块值

来自分类Dev

Django,在一页上上传两个文件

来自分类Dev

一页中加载两个js函数

来自分类Dev

一页上有两个BwuDatagrids

来自分类Dev

一页 django 中的两个视图

来自分类Dev

一页上的两个表单,使用ViewModel绑定到不同的模型

来自分类Dev

如何在一页上使用两个Twitter Bootstrap主题?

来自分类Dev

使用react-hook-form在同一页面上添加两个表单

来自分类Dev

一页上的两个表单,使用ViewModel绑定到不同的模型

来自分类Dev

在一页上使用两个引导国家选择器 - 不要填充

来自分类Dev

未捕获的TypeError:无法读取null的属性“样式”。在同一页面中使用两个Javascript函数

来自分类Dev

同一页面上两个不同控制器的Angularjs双向绑定字段

来自分类Dev

如何将SmartyStreets验证应用于同一页面中的两个表单?

来自分类Dev

Angular 2,在同一页面上运行的两个应用程序之间的通信

来自分类Dev

如何将SmartyStreets验证应用于同一页面中的两个表单?

来自分类Dev

在使用网格排列功能在一页中排列两个图形时需要帮助

Related 相关文章

  1. 1

    在ChakraUI中使用useDisclosure()无法在同一页面上使用两个模式

  2. 2

    在同一页面中使用两个控制器

  3. 3

    如何在C#中从另一页发送的URL中使用两个值?

  4. 4

    使用AngularJS在同一页面中的两个D3.js图

  5. 5

    如何使用会话将两个值从一页传递到php中的另一页

  6. 6

    同一页面中的两个ui视图AngularJs

  7. 7

    同一页面中的两个ui视图AngularJs

  8. 8

    Angular两个应用程序在同一页面上

  9. 9

    一页上有两个sidenav只能使用一个

  10. 10

    一页上有两个分析

  11. 11

    在一页jQuery上显示两个轮播

  12. 12

    一页中加载两个js函数

  13. 13

    在一页上链接两个Bootstrap Carousels

  14. 14

    同一页上的两个滑块值

  15. 15

    Django,在一页上上传两个文件

  16. 16

    一页中加载两个js函数

  17. 17

    一页上有两个BwuDatagrids

  18. 18

    一页 django 中的两个视图

  19. 19

    一页上的两个表单,使用ViewModel绑定到不同的模型

  20. 20

    如何在一页上使用两个Twitter Bootstrap主题?

  21. 21

    使用react-hook-form在同一页面上添加两个表单

  22. 22

    一页上的两个表单,使用ViewModel绑定到不同的模型

  23. 23

    在一页上使用两个引导国家选择器 - 不要填充

  24. 24

    未捕获的TypeError:无法读取null的属性“样式”。在同一页面中使用两个Javascript函数

  25. 25

    同一页面上两个不同控制器的Angularjs双向绑定字段

  26. 26

    如何将SmartyStreets验证应用于同一页面中的两个表单?

  27. 27

    Angular 2,在同一页面上运行的两个应用程序之间的通信

  28. 28

    如何将SmartyStreets验证应用于同一页面中的两个表单?

  29. 29

    在使用网格排列功能在一页中排列两个图形时需要帮助

热门标签

归档