</td></tr><tr><td></td><td colspan="8"><table class="table table-striped table-bordered"><頭><th>圖片網(wǎng)址<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) {
<塊引用>
確保在獲取之前已經(jīng)注入了 particular
依賴項訪問它.假設(shè)你已經(jīng)添加了 ui.bootstrap
模塊也有依賴.
<小時>
更新
如果您使用的是 0.14.X
的最新版本的 angular ui bootstrap,則需要注入 $uibModal
而不是 $modal
.當(dāng)他們重命名所有 boostrap 指令和服務(wù)名稱時,前綴為 uib
.
$modalInstance
依賴也會發(fā)生同樣的事情,需要更改為 $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
這篇關(guān)于角度錯誤 - ReferenceError: $modal 未定義的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網(wǎng)!
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題,如果有圖片或者內(nèi)容侵犯了您的權(quán)益,請聯(lián)系我們刪除處理,感謝您的支持!
相關(guān)文檔推薦
SQL query to get all products, categories and meta data woocommerce/wordpress(獲取所有產(chǎn)品、類別和元數(shù)據(jù)的 SQL 查詢 woocommerce/wordpress)
How to use MySQL in WSL (Windows Subsystem for Linux)?(如何在 WSL(Linux 的 Windows 子系統(tǒng))中使用 MySQL?)
PowerShell MySQL Backup Script Error in Task Scheduler 0x00041301(任務(wù)計劃程序中的 PowerShell MySQL 備份腳本錯誤 0x00041301)
Import the data from the XML files into a MySQL database(將數(shù)據(jù)從 XML 文件導(dǎo)入 MySQL 數(shù)據(jù)庫)
installed Xampp on Windows 7 32-bit. Errors when starting(在 Windows 7 32 位上安裝 Xampp.啟動時的錯誤)
Mysql lower case table on Windows xampp(Windows xampp 上的 Mysql 小寫表)
主站蜘蛛池模板:
全免费a级毛片免费看视频免
|
日韩视频高清
|
www.夜夜骑
|
亚洲高清视频一区二区
|
亚洲综合色视频在线观看
|
久久精品一区
|
看av在线
|
欧美视频在线一区
|
日韩精品一区二区三区免费视频
|
www国产成人免费观看视频,深夜成人网
|
久久成人国产
|
蜜桃综合在线
|
成人一区二区三区视频
|
91精品国产91久久综合桃花
|
日本xx视频免费观看
|
美女一区|
www.97zyz.com|
亚洲成人一级
|
国产精品视频一二三区
|
91成人|
亚洲第一福利视频
|
欧美午夜一区二区三区免费大片
|
国产精品久久久久一区二区三区
|
美女久久|
免费国产视频在线观看
|
国产一区二区观看
|
自拍偷拍第一页
|
美日韩中文字幕
|
中文字幕亚洲视频
|
亚洲免费在线观看视频
|
色一阁
|
欧美精品一区二区三区在线
|
成人国产精品视频
|
国产清纯白嫩初高生视频在线观看
|
伊人手机在线视频
|
国产www在线
|
国产一区二区在线免费观看
|
天堂在线网
|
特黄特色大片免费视频观看
|
久久精品小短片
|
成人免费黄色片
|