在一页中使用两个AngularJS应用 [英] Using two AngularJS apps in one page
问题描述
我在一个页面中有两个AngularJS应用，我想知道为什么Angular崩溃了，然后才意识到这可能是因为两个应用都具有相同的名称(我对AngularJS还是很陌生).
如果需要的话，我需要知道是否需要更改以区别它们.
这是我的代码，其中两个应用分别位于
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]=西北"；$ 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]=东北";$ 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">联系人:{{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">电话:{{d.acf.telephone}}</div>< div id ="listing-mobile">移动设备:{{d.acf.mobile}}</div>< div id ="listing-email">电子邮件:{{d.acf.email}}</div>< div id ="listing-website">网站:< a href ="{{d.acf.website}}"> {{d.acf.website}}</a></div>< div id ="listing-builted">已建立:{{d.acf.founded}}</div>< div id ="listing-about">关于:{{d.acf.about}}</div>< div id ="listing-mailingaddress">邮寄地址:{{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">方向:{{d.acf.directions}}}</div>< div id ="scd-link">< a href ="{{d.link}}">在射击俱乐部目录中查看</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> 页面中可以有两个Angular应用程序，但是其中只有一个可以实例化您的应用程序(是的，给它们提供不同的有意义的名称).手动引导它们.
在您的情况下，我认为只有一个应用程序具有两个控制器，一个用于 NorthWest ，一个用于 NorthEast .
I have two AngularJS apps in one page, I was wondering why the Angular was breaking then realised it was probably because both apps are name the same thing (I'm very new to AngularJS).
What I need to know if what I need to change to differentiate between them if this makes sense.
This is my code with the two apps in separate divs NorthWest and NorthEast.
If anyone could help me with this I would be very grateful,
Thanks, in advance!
<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>
You can have two Angular applications in page, but only one of them can be auto-bootstrapped with ng-app.
You can instantiate your apps (yes, give them different, meaningful names) by bootstrapping them manually.
In your case, I think it makes more sense to have just one application with two controllers, one for NorthWest and one for NorthEast.
这篇关于在一页中使用两个AngularJS应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
