我试图用相同的 json 数据显示我的 html 页面的两个部分,我不想将它们都包装在同一个控制器中,因为它位于不同的区域。我已经通过在“角度服务”中使用本地 json 数据成功实现了这个概念,请参阅演示
<div ng-app="testApp">
<div ng-controller="nameCtrl">
<a href="#" ng-click="addName();">Add New</a>
<a href="#" ng-click="removeName();">Remove First</a>
<ul id="first" class="navigation">
<li ng-repeat="myname in mynames">{{myname.name}}</li>
</ul>
</div>
<div>
Lot of things in between
</div>
<ul id="second" class="popup" ng-controller="nameCtrl">
<li ng-repeat="myname in mynames">{{myname.name}}</li>
</ul>
JS
var testApp = angular.module('testApp', []);
testApp.service('nameService', function($http) {
var me = this;
me.mynames = [
{
"name": "Funny1"
},
{
"name": "Funny2"
},
{
"name": "Funny3"
},
{
"name": "Funny4"
}
];
//How to do
/*this.getNavTools = function(){
return $http.get('http://localhost/data/name.json').then(function(result) {
me.mynames = result.mynames;
return result.data;
});
};*/
this.addName = function() {
me.mynames.push({
"name": "New Name"
});
};
this.removeName = function() {
me.mynames.pop();
};
});
testApp.controller('nameCtrl', function ($scope, nameService) {
$scope.mynames = nameService.mynames;
$scope.$watch(
function(){ return nameService },
function(newVal) {
$scope.mynames = newVal.mynames;
}
)
$scope.addName = function() {
nameService.addName();
}
$scope.removeName = function() {
nameService.removeName();
}
});
接下来我要做的是向 json 文件发出 http 请求并用数据加载我的两个部分,如果我添加或删除它应该反映在这两个区域中。
任何指针或现有演示都会很有帮助。
谢谢