在一页中使用两个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屋!