我在S-O各处搜索了这个问题的答案,但似乎没有一个对我的具体案例起作用。如果这可能是重复的,请原谅我。
我尝试做的是将我的JSON数据插入模式(使用UI-Bootstrap),但我一直在遇到麻烦。我尝试了通过谷歌搜索找到的许多不同的例子,但没有显示数据。
我为模态窗口创建了一个新视图,代码如下所示:
<div ng-controller="MainCtrl"class="modal-header">
<h3 class="modal-title">More Info</h3>
</div>
<div class="modal-body">
<p>{{user.username}}</p>
<ul>
<li ng-repeat="user in users">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ user.username }}</a>
</li>
</ul>
Selected: <b>{{ user.username }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
在main.html(主视图)上调用此模态,如下所示:
<md-scroll-shrink><header sticky layout="row" layout-xs="column" class="header">
<h3 class="text-center affix-top ">User Directory</h3>
</header>
</md-scroll-shrink>
<div layout="row" layout-md="column">
<div flex>
<md-card id="card" ng-repeat="user in users">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{user.name}}</span>
<span class="glyphicon glyphicon-phone"></span>
<span class="md-subhead">{{user.email}}</span>
</md-card-title-text>
<md-card-title-media>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<button ng-click="open()" class="btn btn-success">More Info</button>
</md-card-actions>
</md-card>
</div>
</div>
最后这里是主控制器(main.js):
'use strict';
/**
* @ngdoc function
* @name peapodTestApp.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the peapodTestApp
*/
angular.module('peapodTestApp')
.controller('ModalInstanceCtrl',function($scope,$uibModalInstance,UserService){
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
.controller('MainCtrl', function ($scope,UserService,$uibModal,$log) {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'ngMaterial'
];
$scope.users = UserService;
$scope.animationsEnabled = true;
$scope.open = function (UserService,size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'views/modal.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
user: function () {
return $scope.user;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
})
.service('UserService',function(){
var user = [{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "929983874",
"geo": {
"lat": "37.3159",
"lng": "81.1496"
}
},
"phone": false,
"website": "hildegard.org",
"company": {
"name": "RomagueraCrona",
"catchPhrase": "Multilayered clientserver neuralnet",
"bs": "harness realtime emarkets",
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "905667771",
"geo": {
"lat": "43.9509",
"lng": "34.4618"
}
},
"phone": "0106926593 x09125",
"website": "anastasia.net",
"company": {
"name": "DeckowCrist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supplychains"
}
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"address": {
"street": "Douglas Extension",
"suite": "Suite 847",
"city": "McKenziehaven",
"zipcode": "595904157",
"geo": {
"lat": "68.6102",
"lng": "47.0653"
}
},
"phone": "",
"website": "ramiro.info",
"company": {
"name": "RomagueraJacobson",
"catchPhrase": "Face to face bifurcated interface",
"bs": "eenable strategic applications"
}
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"address": {
"street": "Hoeger Mall",
"suite": "Apt. 692",
"city": "South Elvis",
"zipcode": "539194257",
"geo": {
"lat": "29.4572",
"lng": "164.2990"
}
},
"phone": "4931709623 x156",
"website": "kale.biz",
"company": {
"name": "RobelCorkery",
"catchPhrase": "Multitiered zero tolerance productivity",
"bs": "transition cuttingedge web services"
}
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"address": {
"street": "Skiles Walks",
"suite": "Suite 351",
"city": "Roscoeview",
"zipcode": "33263",
"geo": {
"lat": "31.8129",
"lng": "62.5342"
}
},
"phone": "(254)9541289",
"website": "demarco.info",
"company": {
"name": "Keebler LLC",
"catchPhrase": "Usercentric faulttolerant solution",
"bs": "revolutionize endtoend systems"
}
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"address": {
"street": "Norberto Crossing",
"suite": "Apt. 950",
"city": "South Christy",
"zipcode": "235051337",
"geo": {
"lat": "71.4197",
"lng": "71.7478"
}
},
"phone": "",
"website": "ola.org",
"company": {
"name": "ConsidineLockman",
"catchPhrase": "Synchronised bottomline interface",
"bs": "eenable innovative applications"
}
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"address": {
"street": "Rex Trail",
"suite": "Suite 280",
"city": "Howemouth",
"zipcode": "588041099",
"geo": {
"lat": "24.8918",
"lng": "21.8984"
}
},
"phone": "210.067.6132",
"website": "elvis.io",
"company": {
"name": "Johns Group",
"catchPhrase": "Configurable multimedia taskforce",
"bs": "generate enterprise etailers"
}
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"address": {
"street": "Ellsworth Summit",
"suite": "Suite 729",
"city": "Aliyaview",
"zipcode": "45169",
"geo": {
"lat": "14.3990",
"lng": "120.7677"
}
},
"phone": "586.493.6943 x140",
"website": "jacynthe.com",
"company": {
"name": "Abernathy Group",
"catchPhrase": "Implemented secondary concept",
"bs": "eenable extensible etailers"
}
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"address": {
"street": "Dayna Park",
"suite": "Suite 449",
"city": "Bartholomebury",
"zipcode": "764953109",
"geo": {
"lat": "24.6463",
"lng": "168.8889"
}
},
"phone": "(775)9766794 x41206",
"website": "conrad.com",
"company": {
"name": "Yost and Sons",
"catchPhrase": "Switchable contextuallybased project",
"bs": "aggregate realtime technologies"
}
}
];
return user;
})
此外,BTW我尝试更新之前的问题,但从未收到过回复。如果有人有任何提示,我将非常感谢帮助。感谢
更新不幸的是,我仍然无法让我的模态显示我的JSON值,我已经尝试了建议的修复程序,但仍然没有...任何其他建议都会有所帮助。感谢
答案 0 :(得分:0)
modalInstanceCtrl需要接收解析变量
.controller('ModalInstanceCtrl',function($scope,$uibModalInstance,user){
$scope.user = user;
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
注入已解析的用户而不是userService