角度错误 - ReferenceError: $modal 未定义
我正在使用教程中的代码并对其进行了一些修改.我遇到了编辑功能的问题.我不断收到ReferenceError: $modal is not defined"这是我的代码.
postCtrl:
app.filter('startFrom', function() {返回函数(输入，开始){如果(输入){开始 = + 开始；//解析为int返回 input.slice(start);}返回 [];}});app.filter('dateToISO', function() {返回函数(输入){input = new Date(input).toISOString();返回输入；};});app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data) {Data.get('posts').then(function(data){$scope.posts = data.data;$scope.currentPage = 1;//当前页面$scope.filteredItems = $scope.posts.length;//最初为无过滤器$scope.totalItems = $scope.posts.length;$scope.list_pages = [{编号:'5'，名称:'5'}, {编号:'10'，名称:'10'}, {编号:'20'，名称:'20'}, {编号:'50'，名称:'50'}, {id: '100',名称:'100'}];$scope.maxSize = 5;});$scope.setPage = function(pageNo) {$scope.currentPage = pageNo;};$scope.filter = function() {$超时(功能(){$scope.filteredItems = $scope.filtered.length;}, 10);};$scope.sort_by = 函数(谓词){$scope.predicate = 谓词；$scope.reverse = !$scope.reverse;};$scope.changePostStatus = function(post){post.approved = (post.approved=="1" ? "0" : "1");Data.put("posts/"+post.id,{approved:post.approved});};$scope.changePostAnnounce = function(post){post.announce = (post.announce=="1" ? "0" : "1");Data.put("posts/"+post.id,{announce:post.announce});};$scope.trashPost = function(post){//$log.log(post);if(confirm("你确定要删除帖子吗")){Data.delete("posts/"+post.id).then(function(result){$scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));});}};$scope.open = 函数(p，大小){var modalInstance = $modal.open({templateUrl: 'views/postsEdit.html',控制器:'postsEditCtrl',尺寸:尺寸，解决: {项目:函数(){返回 p;}}});modalInstance.result.then(function(selectedObject) {if(selectedObject.save ==插入"){$scope.posts.push(selectedObject);$scope.posts = $filter('orderBy')($scope.posts, 'id', 'reverse');}else if(selectedObject.save == "update"){p.description = selectedObject.description;p.price = selectedObject.price;p.stock = selectedObject.stock;p.packing = selectedObject.packing;}});};});app.controller('postsEditCtrl', function ($scope, $modalInstance, item, Data) {$scope.post = angular.copy(item);$scope.cancel = 函数 () {$modalInstance.dismiss('关闭');};$scope.title = (item.id > 0) ?'编辑帖子' : '添加帖子';$scope.buttonText = (item.id > 0) ?'更新帖子' : '添加新帖子';var 原始 = 项目；$scope.isClean = 函数(){返回 angular.equals(original, $scope.post);}$scope.saveProduct = 函数(后){post.uid = $scope.uid;如果(post.id > 0){Data.put('posts/'+post.id, post).then(function (result) {如果(结果.状态！= '错误'){var x = angular.copy(post);x.save = '更新';$modalInstance.close(x);}别的{控制台日志(结果)；}});}别的{post.status = '活动';Data.post('posts', post).then(function (result) {如果(结果.状态！= '错误'){var x = angular.copy(post);x.save = '插入';x.id = 结果.数据；$modalInstance.close(x);}别的{控制台日志(结果)；}});}};});html:
<div class="row" align="center"><div class="stats"><i class="fa fa-thumb-tack"></i>帖子总数 (<span class="attendStat">{{ totalItems }}</span>)<span class="seperator"> | </span><i class="fa fa-trash-o"></i><a href="#" id="trashCan" class="trashCan">垃圾桶</a>(<span class="attendStat">X</span>)</div><div class="row"><div class="col-md-1">页面大小:<select ng-model="entryLimit" class="form-control" ng-options="obj.id as obj.name for obj in list_pages" ng-init="entryLimit='10'"></选择>
<div class="col-md-5"><span class="">已过滤:{{filtered.length }} of {{ totalItems }} 总帖子</span><input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control"/>
<div class="col-md-4 pull-right text-right" ng-show="filteredItems > 0"><uib-pagination total-items="filteredItems" items-per-page="entryLimit" boundary-link-numbers="true" max-size="maxSize" ng-model="currentPage" class="pagination-sm"></uib-分页>
<br/><div class="row"><div class="table-responsive" ng-show="filteredItems > 0"><table class="table table-striped table-bordered"><头><th>发布日期<a ng-click="sort_by('publishdate');"><i class="glyphicon glyphicon-sort"></i></a></th><th>GUID <a ng-click="sort_by('guid');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th>平台<a ng-click="sort_by('platform');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th>链接标题<a ng-click="sort_by('title');"><i class="glyphicon glyphicon-sort"></i></a></th><th>重定向网址(基础)<a ng-click="sort_by('redirect');"><i class="glyphicon glyphicon-sort"></i><;/a></th><th>Announce<a ng-click="sort_by('announce');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th>Approve<a ng-click="sort_by('approve');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th></th></thead><tbody ng-repeat="过滤中的数据 = (posts | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"><tr><td class="posts-publishdate">{{data.publishdate |dateToISO |日期:'MMM d, y h:mm a' }}</td><td>{{data.guid}}</td><td>{{data.platform}}</td><td>{{data.title}}</td><td>{{data.redirect}}</td><td><button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.announce]" ng-click="changePostAnnounce(data);">{{data.announce == '1' ?"活动" : "非活动"}}</button></td><td><button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.approved]" ng-click="changePostStatus(data);">{{data.approved == '1' ?"活动" : "非活动"}}</button></td><td style="width:100px"><div class="btn-group"><button type="button" class="btn btn-default fa fa-edit" ng-click="open(data);"></button><button type="button" class="btn btn-danger fa fa-trash-o" ng-click="trashPost(data);"></button>
</td></tr><tr><td></td><td colspan="8"><table class="table table-striped table-bordered"><头><th>图片网址<a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th><th>链接描述<a ng-click="sort_by('description');"><i class="glyphicon glyphicon-sort"></i></a></th><th>Tweet<a ng-click="sort_by('dynamic_content');"><i class="glyphicon glyphicon-sort"></i></a><;/th></thead>
<tr><td><img src="{{data.img}}" width="200"></td><td>{{data.description}}</td><td>{{data.dynamic_content}}</td></tr></tbody></td></tr></tbody><div class="col-md-12" ng-show="filteredItems == 0"><div class="col-md-12"><h4>未找到客户</h4>
任何帮助将不胜感激.
解决方案 您错过了在 postsCtrl 控制器中注入 $modal 依赖项
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data, $modal) {
<块引用>
确保在获取之前已经注入了 particular 依赖项访问它.假设你已经添加了 ui.bootstrap 模块也有依赖.
<小时>
更新
如果您使用的是 0.14.X 的最新版本的 angular ui bootstrap，则需要注入 $uibModal 而不是 $modal.当他们重命名所有 boostrap 指令和服务名称时，前缀为 uib.
$modalInstance 依赖也会发生同样的事情，需要更改为 $uibModalInstance
I am using code form a tutorial and modifying it a bit. I have run into an issue with the edit feature. I keep getting a "ReferenceError: $modal is not defined" here is my code.
postCtrl:
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.filter('dateToISO', function() {
return function(input) {
input = new Date(input).toISOString();
return input;
};
});
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data) {
Data.get('posts').then(function(data){
$scope.posts = data.data;
$scope.currentPage = 1; //current page
$scope.filteredItems = $scope.posts.length; //Initially for no filter
$scope.totalItems = $scope.posts.length;
$scope.list_pages = [
{
id: '5',
name: '5'
}, {
id: '10',
name: '10'
}, {
id: '20',
name: '20'
}, {
id: '50',
name: '50'
}, {
id: '100',
name: '100'
}
];
$scope.maxSize = 5;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
$scope.changePostStatus = function(post){
post.approved = (post.approved=="1" ? "0" : "1");
Data.put("posts/"+post.id,{approved:post.approved});
};
$scope.changePostAnnounce = function(post){
post.announce = (post.announce=="1" ? "0" : "1");
Data.put("posts/"+post.id,{announce:post.announce});
};
$scope.trashPost = function(post){
//$log.log(post);
if(confirm("Are you sure to remove the post")){
Data.delete("posts/"+post.id).then(function(result){
$scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));
});
}
};
$scope.open = function (p,size) {
var modalInstance = $modal.open({
templateUrl: 'views/postsEdit.html',
controller: 'postsEditCtrl',
size: size,
resolve: {
item: function () {
return p;
}
}
});
modalInstance.result.then(function(selectedObject) {
if(selectedObject.save == "insert"){
$scope.posts.push(selectedObject);
$scope.posts = $filter('orderBy')($scope.posts, 'id', 'reverse');
}else if(selectedObject.save == "update"){
p.description = selectedObject.description;
p.price = selectedObject.price;
p.stock = selectedObject.stock;
p.packing = selectedObject.packing;
}
});
};
});
app.controller('postsEditCtrl', function ($scope, $modalInstance, item, Data) {
$scope.post = angular.copy(item);
$scope.cancel = function () {
$modalInstance.dismiss('Close');
};
$scope.title = (item.id > 0) ? 'Edit Post' : 'Add Post';
$scope.buttonText = (item.id > 0) ? 'Update Post' : 'Add New Post';
var original = item;
$scope.isClean = function() {
return angular.equals(original, $scope.post);
}
$scope.saveProduct = function (post) {
post.uid = $scope.uid;
if(post.id > 0){
Data.put('posts/'+post.id, post).then(function (result) {
if(result.status != 'error'){
var x = angular.copy(post);
x.save = 'update';
$modalInstance.close(x);
}else{
console.log(result);
}
});
}else{
post.status = 'Active';
Data.post('posts', post).then(function (result) {
if(result.status != 'error'){
var x = angular.copy(post);
x.save = 'insert';
x.id = result.data;
$modalInstance.close(x);
}else{
console.log(result);
}
});
}
};
});
html:
<div class="container">
<div class="row" align="center">
<div class="stats"><i class="fa fa-thumb-tack"></i> Total Posts (<span class="attendStat">{{ totalItems }}</span>)<span class="seperator"> | </span><i class="fa fa-trash-o"></i> <a href="#" id="trashCan" class="trashCan">Trash</a> (<span class="attendStat">X</span>)</div>
</div>
<div class="row">
<div class="col-md-1">PageSize:
<select ng-model="entryLimit" class="form-control" ng-options="obj.id as obj.name for obj in list_pages" ng-init="entryLimit='10'">
</select>
</div>
<div class="col-md-5"><span class="">Filtered: {{ filtered.length }} of {{ totalItems }} total posts</span>
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div class="col-md-4 pull-right text-right" ng-show="filteredItems > 0">
<uib-pagination total-items="filteredItems" items-per-page="entryLimit" boundary-link-numbers="true" max-size="maxSize" ng-model="currentPage" class="pagination-sm"></uib-pagination>
</div>
</div>
<br/>
<div class="row">
<div class="table-responsive" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>Publish Date <a ng-click="sort_by('publishdate');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>GUID <a ng-click="sort_by('guid');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Platform <a ng-click="sort_by('platform');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Link Title <a ng-click="sort_by('title');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Redirect Url (Base) <a ng-click="sort_by('redirect');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Announce <a ng-click="sort_by('announce');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Approve <a ng-click="sort_by('approve');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th></th>
</thead>
<tbody ng-repeat="data in filtered = (posts | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<tr>
<td class="posts-publishdate">{{data.publishdate | dateToISO | date:'MMM d, y h:mm a' }}</td>
<td>{{data.guid}}</td>
<td>{{data.platform}}</td>
<td>{{data.title}}</td>
<td>{{data.redirect}}</td>
<td>
<button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.announce]" ng-click="changePostAnnounce(data);">{{data.announce == '1' ? "Active" : "Inactive"}}</button>
</td>
<td>
<button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.approved]" ng-click="changePostStatus(data);">{{data.approved == '1' ? "Active" : "Inactive"}}</button>
</td>
<td style="width:100px">
<div class="btn-group">
<button type="button" class="btn btn-default fa fa-edit" ng-click="open(data);"></button>
<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="trashPost(data);"></button>
</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="8">
<table class="table table-striped table-bordered">
<thead>
<th>Image Url <a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Link Description <a ng-click="sort_by('description');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Tweet <a ng-click="sort_by('dynamic_content');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr>
<td><img src="{{data.img}}" width="200"></td>
<td>{{data.description}}</td>
<td>{{data.dynamic_content}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No customers found</h4>
</div>
</div>
</div>
</div>
Any help would be much appreciated.
解决方案 You missed to inject $modal dependency inside postsCtrl controller
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data, $modal) {
Make sure you have injected particular dependency before getting
access to it. Assuming you have already added ui.bootstrap module
dependency too.
UPDATE
If you are using latest version of angular ui bootstrap which is 0.14.X would need to inject $uibModal instead of $modal. As they rename all boostrap directive and serviec name prepends with uib prefix.
Same thing will happen with $modalInstance dependency, which need to change to $uibModalInstance
相关文章