如何将 json 数据放入 AngularJS 模态对话框?
How to get json data into AngularJS modal dialog?
我正在尝试使用 angularjs 在我的模式上显示 json 值。但是我无法在模式对话框中显示,但我可以在我的控制台或警告消息中看到这些值。请帮助我哪里做错了。提前致谢。
已创建 Plnkr。
html:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TestCtrl">
<button ng-click="test()">Test</button>
</div>
</body>
</html>
script.js:
angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
$scope.test = function(){
$http.get('test.json')
.success(function(data) {
$dialog.dialog({}).open('test.html');
$scope.items=data;
console.log(data);
alert(JSON.stringify(data));
});
}
}
test.html:
<div class="modal-header">
<h1>Test Modal</h1>
</div>'
<div class="modal-body">
Test Data:
<ul ng-repeat="item in items">
<li>
{{item.test1}}
{{item.test2}}
{{item.test3}}
</li>
</ul>
</div>
test.json:
[{
"test1": "test1value",
"test2": "10",
"test3": "100"
}]
问题是您的作用域变量在 test.html
中不可访问。
我刚刚将您的变量更新为 rootScope
,但它工作正常。
注意:这是一个补丁工作,而不是一个正确的实现。 @Karim 的回答,看起来更像是一个正确的实现,如果它对你有用,应该被视为答案。
您似乎在模态中看不到该变量。
试试这个,我刚刚修复了你的 plunker:
// Code goes here
var app = angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
$scope.test = function(){
// $dialog.dialog({}).open('modalContent.html');
$http.get('test.json')
.success(function(data) {
$scope.items=data;
console.log(data);
alert(JSON.stringify(data));
$dialog.dialog({
templateUrl: 'test.html',
controller: 'dialogCtrl',
resolve: { items: function () { return $scope.items; } }
}).open('test.html');
});
}
}
app.controller('dialogCtrl', function ($scope, items) {
$scope.items= items;
});
我正在尝试使用 angularjs 在我的模式上显示 json 值。但是我无法在模式对话框中显示,但我可以在我的控制台或警告消息中看到这些值。请帮助我哪里做错了。提前致谢。
已创建 Plnkr。
html:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TestCtrl">
<button ng-click="test()">Test</button>
</div>
</body>
</html>
script.js:
angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
$scope.test = function(){
$http.get('test.json')
.success(function(data) {
$dialog.dialog({}).open('test.html');
$scope.items=data;
console.log(data);
alert(JSON.stringify(data));
});
}
}
test.html:
<div class="modal-header">
<h1>Test Modal</h1>
</div>'
<div class="modal-body">
Test Data:
<ul ng-repeat="item in items">
<li>
{{item.test1}}
{{item.test2}}
{{item.test3}}
</li>
</ul>
</div>
test.json:
[{
"test1": "test1value",
"test2": "10",
"test3": "100"
}]
问题是您的作用域变量在 test.html
中不可访问。
我刚刚将您的变量更新为 rootScope
,但它工作正常。
注意:这是一个补丁工作,而不是一个正确的实现。 @Karim 的回答,看起来更像是一个正确的实现,如果它对你有用,应该被视为答案。
您似乎在模态中看不到该变量。
试试这个,我刚刚修复了你的 plunker:
// Code goes here
var app = angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
$scope.test = function(){
// $dialog.dialog({}).open('modalContent.html');
$http.get('test.json')
.success(function(data) {
$scope.items=data;
console.log(data);
alert(JSON.stringify(data));
$dialog.dialog({
templateUrl: 'test.html',
controller: 'dialogCtrl',
resolve: { items: function () { return $scope.items; } }
}).open('test.html');
});
}
}
app.controller('dialogCtrl', function ($scope, items) {
$scope.items= items;
});