你能告诉我我的代码有什么问题吗？我得到了初始 HTML 页面，但是当我单击“打开”时，没有任何反应。甚至控制台也不会记录错误或任何其他更改。
应用程序.js
var app = angular.module('carApp', ['ui.bootstrap']);
控制键
app.controller('carCtrl', function($scope, $http, $uibModal) {
$http.get('jobs.json').success(function(data) {
$scope.data = data;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTpl.html',
controller : modalContentCtrl,
resolve: {
items: function() {
return $scope.data;
}
}
})
}
});
});
var modalContentCtrl = function ($scope, $modalInstance, data) {
$scope.data = data;
$scope.selected = {
item: $scope.data.specs
};
};
JSON:
{
"specs":[
{
"job-title":"TITLE",
"job-apply":"applink",
"job-body":"JOB BODY"
}
]
}
HTML:
<div class="car-up">
<script type="text/ng-template" id="careersTpl.html">
<div class="modal-header">
<h3>Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p ng-repeat="item in data">{{item}}</p>
</div>
</script>
<button class="btn" ng-click="open()">Open</button>
</div>
我是 AngularJS 的新手，但我已经链接了 app.js 和 ctrl.js...谢谢。
编辑:在我将 ng-controller="carCtrl" 放入 html 文件后，我收到此错误:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance O/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:6:412 db/n.$injector<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:84 d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344 db/V<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:43:144 d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:40:344 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:78 h/<.invoke@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:41:163 gf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:89:397 resolveSuccess@https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js:4422:34 e/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:130:409 vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:103 vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:142:165 vf/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:399 Lc[b]https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:274:444 Sf@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:37:31 Rf/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:36:486
最佳答案
请找到工作演示
angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
var app = angular.module('carApp');
app.controller('carCtrl', function($scope, $http, $uibModal) {
//$http.get('jobs.json').success(function(data) {//Uncomment
//$scope.data = data; Uncomment
//Remove below line from code when you are using this in your project
$scope.data = {
"specs": [{
"job-title": "TITLE",
"job-apply": "applink",
"job-body": "JOB BODY"
}]
}
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTpl.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
resolve: {
items: function() {
return $scope.data;
}
}
})
}
//});//Uncomment
});
app.controller('ModalInstanceCtrl', function($uibModalInstance, items, $scope) {
$scope.data = items;
console.log($scope.data);
$scope.selected = {
item: $scope.data.specs
};
});<!doctype html>
<html ng-app="carApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="carCtrl" class="modal-demo">
<script type="text/ng-template" id="careersTpl.html">
<div class="modal-header">
<h3>Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p ng-repeat="(k,v) in data.specs">
<span>Title: {{v["job-title"]}}<br/> </span>
<span>Link: {{v["job-apply"]}}<br/> </span>
<span>Body: {{v["job-body"]}}<br/> </span>
</p>
</div>
</script>
<button class="btn" ng-click="open()">Open</button>
</div>
</body>
</html>关于javascript - AngularJS $uibModal 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40868417/