</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
這篇關于角度錯誤 - ReferenceError: $modal 未定義的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!
相關文檔推薦
SQL query to get all products, categories and meta data woocommerce/wordpress(獲取所有產品、類別和元數據的 SQL 查詢 woocommerce/wordpress)
How to use MySQL in WSL (Windows Subsystem for Linux)?(如何在 WSL(Linux 的 Windows 子系統)中使用 MySQL?)
PowerShell MySQL Backup Script Error in Task Scheduler 0x00041301(任務計劃程序中的 PowerShell MySQL 備份腳本錯誤 0x00041301)
Import the data from the XML files into a MySQL database(將數據從 XML 文件導入 MySQL 數據庫)
installed Xampp on Windows 7 32-bit. Errors when starting(在 Windows 7 32 位上安裝 Xampp.啟動時的錯誤)
Mysql lower case table on Windows xampp(Windows xampp 上的 Mysql 小寫表)
主站蜘蛛池模板:
99re在线|
人人干天天干
|
亚洲一区二区免费
|
成人一区二区在线
|
日韩av一区二区在线观看
|
国产ts人妖一区二区三区
|
亚洲成人三区
|
日韩精品久久久久
|
亚洲网站在线播放
|
一本岛道一二三不卡区
|
午夜午夜精品一区二区三区文
|
能看的av网站
|
国产欧美精品区一区二区三区
|
天天想天天干
|
99久久日韩精品免费热麻豆美女
|
av网站在线看|
精品国产一区二区三区久久久蜜月
|
在线看av的网址
|
成人在线电影网站
|
亚洲不卡视频
|
黄色毛片免费看
|
k8久久久一区二区三区
|
国产精品亚洲片在线播放
|
在线观看av网站永久
|
国产一区二区三区高清
|
成人午夜性成交
|
日韩精品视频在线免费观看
|
毛片国产
|
综合九九
|
成人视屏在线观看
|
久久久久久蜜桃一区二区
|
国产乱码精品一区二区三区av
|
欧美在线视频一区二区
|
福利一区二区在线
|
日韩av在线一区
|
国产一区二区在线看
|
中文字幕一级毛片
|
综合久久亚洲
|
久久久av中文字幕
|
成人福利网|
精品中文视频
|