</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 小寫表)
主站蜘蛛池模板:
除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司
|
水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂
|
车间除尘设备,VOCs废气处理,工业涂装流水线,伸缩式喷漆房,自动喷砂房,沸石转轮浓缩吸附,机器人喷粉线-山东创杰智慧
|
【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院
|
丹佛斯变频器-丹佛斯压力开关-变送器-广州市风华机电设备有限公司
|
深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家
|
热回收盐水机组-反应釜冷水机组-高低温冷水机组-北京蓝海神骏科技有限公司
|
胃口福饺子加盟官网_新鲜现包饺子云吞加盟 - 【胃口福唯一官网】
|
广东佛电电器有限公司|防雷开关|故障电弧断路器|智能量测断路器
广东西屋电气有限公司-广东西屋电气有限公司
|
直流电能表-充电桩电能表-导轨式电能表-智能电能表-浙江科为电气有限公司
|
无锡网站建设_企业网站定制-网站制作公司-阿凡达网络
|
列管冷凝器,刮板蒸发器,外盘管反应釜厂家-无锡曼旺化工设备有限公司
|
工作服定制,工作服定做,工作服厂家-卡珀职业服装(苏州)有限公司
|
七维官网-水性工业漆_轨道交通涂料_钢结构漆
|
专业的新乡振动筛厂家-振动筛品质保障-环保振动筛价格—新乡市德科筛分机械有限公司
|
粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】
|
【法利莱住人集装箱厂家】—活动集装箱房,集装箱租赁_大品牌,更放心
|
手板-手板模型-手板厂-手板加工-生产厂家,[东莞创域模型]
|
福建自考_福建自学考试网|
北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司
|
轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电
|
滑板场地施工_极限运动场地设计_滑板公园建造_盐城天人极限运动场地建设有限公司
|
蔬菜清洗机_环速洗菜机_异物去除清洗机_蔬菜清洗机_商用洗菜机 - 环速科技有限公司
|
杭州双螺杆挤出机-百科|
制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司
|
抖音短视频运营_企业网站建设_网络推广_全网自媒体营销-东莞市凌天信息科技有限公司
|
流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全
|
中细软知识产权_专业知识产权解决方案提供商
|
高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明
|
微信小程序定制,广州app公众号商城网站开发公司-广东锋火
|
仿古建筑设计-仿古建筑施工-仿古建筑公司-汉匠古建筑设计院
|
智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技
|
生物颗粒燃烧机-生物质燃烧机-热风炉-生物颗粒蒸汽发生器-丽水市久凯能源设备有限公司
|
德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司
|
法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工
阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司
|
压砖机、液压制砖机、静压砖机、环保砖机生产厂家—杜甫机械
|
行吊_电动单梁起重机_双梁起重机_合肥起重机_厂家_合肥市神雕起重机械有限公司
|
接地电阻测试仪[厂家直销]_电缆故障测试仪[精准定位]_耐压测试仪-武汉南电至诚电力设备
|
南京试剂|化学试剂|分析试剂|实验试剂|cas号查询-专业60年试剂销售企业
|
步进电机_agv电机_伺服马达-伺服轮毂电机-和利时电机
|
扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司
|