用户可以在此处ui-select选择一个选项：
<ui-select ng-model="state.selected" ng-change="openModal(state.selected,orders.order_id)" ng-if="orders.state == 'Paid'" theme="selectize" ng-disabled="disabled" style="width: 300px;"> .....
每当有变化时，它就会从引导程序触发模式
$scope.openModal = function(name,oid){
$scope.modalInstance = $modal.open({
templateUrl: 'reservationModal.html',
scope:$scope,
name: function(){
return name;
}
});
}
$scope.cancel = function(){
$scope.modalInstance.dismiss();
}
$scope.confirmChg = function(){
console.log('ok...');
}
模板如下：
<script type="text/ng-template" id="reservationModal.html">
<div class="modal-header">
<h3 class="modal-title">Confirmation</h3>
<!--<button class="btn btn-warning" ng-click="close()">X</button>-->
</div>
<div class="modal-body">
Confirm to change status to {{name}} ?
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" ng-click="confirmChg(status_oid,status)">Yes</button>
<button class="btn btn-warning" type="button" ng-click="cancel()" data-dismiss="modal">No</button>
</div>
</script>
问题是， …
我正在尝试为 Angular 找到一个好的富文本编辑器指令，它支持树状自动完成，这意味着：
例如，我可以传递一个用于自动完成的“建议”数组，每个“建议”都包含一个“文本”和一个用于嵌套“建议”的数组，等等。
而且，我可以使用“.”访问嵌套选项。例如。
所以，我通过它：
[{
'text': 'parent1',
'suggestions': [{
'text': 'child1',
}, {
'text': 'child2'
}]
}, {
'text', 'parent2',
'suggestions': [{
'text': 'child3',
}, {
'text': 'child4'
}]
}]
用户可以写“p”来查看“parent1”和“parent2”作为建议。当他选择任何一个并按“.”时 他将其子项视为建议。
JQuery 选项也适合我。
当将 TypeScript 与 Angular 的 ui 状态一起使用时，我可以通过 UI-Router 明确类型库提供“类型断言”。
使用它，我可以注入$state并获得类似于以下内容的代码
function myCtrl($state: ng.ui.IStateService){
// Some code
}
这为我提供了正确的自动完成/错误报告$state。
到目前为止，一切都很好。
当我尝试访问params如下属性时
function myCtrl($state: ng.ui.IStateService){
// Trying to access a property of $state.params
var example = $state.params.example;
}
我收到一条错误消息：
IStateParamsService 上不存在属性“example”
因为 TypeScript 不知道这个属性，这是正确的。
定义我自己的扩展接口ng.ui.IStateService
interface IMyState extends ng.ui.IStateService{
params: {
example: string;
};
}
然后将类型设置为我的界面
function myCtrl($state: IMyState){
var example = $state.params.example;
}
这样就消除了错误。
正确的使用类型是什么$state？
我应该像我的示例中那样定义自己的界面吗？
javascript angularjs typescript angular-ui angular-ui-router
我有一个简单的数据集,我想使用angular-js ui进行分页.这是服务器驱动的分页,因为它可以变得非常大.
现在,我遇到的问题是我的分页元素没有显示出来.
<pagination total-items="totalItems" page="filterCriteria.pageNumber"></pagination>
就是我所拥有的,这两个参数都是正确的(测试过).
起初我以为我可能没有导入所有正确的文件,但经过一些检查后我似乎找不到任何遗漏:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="js/angular-file-upload-shim-min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
有什么想法为什么分页元素不会出现在我的页面上？
这很简单,但我不知道什么是错的.我有以下示例,使用角度ui-router和角度1.2.16制作一个简单的Web模板.
<script type='text/javascript' src='angular.js'></script>
<script type='text/javascript' src='angular-ui-router.js'></script>
<script type='text/javascript' src='js/me/app.js'></script>
我写了app.js和index.html之类的东西
app.js
angular.module('app',[
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider'],function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
//console.log($urlRouterProvider);
$stateProvider
.state('home',{
url:'/',
templateUrl:'home.html'
})
})
而index.html是
<body ng-app="app">
<header ng-include="'header.html'"></header>
<!-- End of Header -->
<div ui-view="''"></div>
<footer ng-include="'footer.html'"></footer></body>
我的页眉和页脚正常工作.这是一个很好的第一步.但是当我尝试路线时,没有任何反应.
在我的控制台中根本没有错误..我不明白,是什么事？我觉得这很简单.也许是因为我对角度很新.所以,如果您可以提供解决方案,请提供帮助.
无法让$ observe触发任何改变.
.directive('watchContent', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
console.log(attrs.class)
attrs.$observe("class", function(value){
console.log('change !');
if(value.indexOf("open") > -1){
alert("yes")
}
})
scope.$watch(function() {return attrs.class; }, function(newValue, oldValue, scope){
console.log('change !');
console.log(newValue)
console.log(oldValue)
console.log(scope)
console.log(attrs.class)
// debugger;
if (elem.hasClass('open')) {
console.log('YEs')
} else {
console.log('no')
}
});
}
};
})
这是我试图触发的地方:
<li class="dropdown dropdownChange" id="contentMenu" watch-content>
<a class="dropdown-toggle" >
Content options
</a>
<ul class="dropdown-menu" >
<li ng-repeat="option in options">
<a><input type="checkbox" checklist-model="contentChoices" checklist-value="option.id" ng-click="$event.stopPropagation()" ng-change="changed()"> …我正在使用ratingangular bootstrap ui 的指令.如何将自定义图像用作图标而不是glyphicon？
我有一个Ionic选项卡菜单,显示4项(下面的代码和codepen只有2项清晰度)和一个"更多"项目,导致进一步的菜单选项显示为离子内容列表.它使用Angular ui-router.我有两个可能相关的问题.
问题1:首先应用程序似乎工作正常,但是当您开始浏览几个链接时(通常在访问"更多"之后,选项卡将开始返回错误的URL.例如:
说明新闻>联系>更多>体育>联系人>新闻>更多 - 在这里打破,我看到联系人内容而不是更多内容.
我已经在每个控制器和Chrome开发工具控制台中添加了一个console.log,我可以看到每个标签点击似乎都是额外的事件,例如点击新闻标签意味着"新闻"在控制台中出现两次.此外,在上面的导航示例中,控制台显示我单击"更多"时启动了联系人控制器.
总而言之,在对应用程序进行一些点击后,href目标似乎将我发送到了错误的位置,就好像在运行时编辑了代码一样.
问题2:直到如上所述导航中断的点,后退按钮对于从选项卡启动的页面正常工作,但对于从"更多"页面(即从列表)启动的页面,没有后退按钮.
对不起,所有这些初学者的问题!
Codepen:http://codepen.io/anon/pen/hBpfa
index.html的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="schoolApp" animation="slide-left-right-ios7">
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top">
<ion-tab title="News" icon="icon ion-ios7-paper-outline SS-tab-icon" href="#/tab/news">
<ion-nav-view></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="icon ion-ios7-telephone SS-tab-icon" href="#/tab/contact">
<ion-nav-view></ion-nav-view>
</ion-tab>
<ion-tab title="More" icon="icon …有没有办法防止AngularJS模态在模态的控制器逻辑中关闭/解除？
我想要的是当用户关闭模态时显示警告,并且模态内的表单包含未保存的数据.
我已经尝试过搜索一个关闭之前的事件或者我可以在官方文档中使用的其他东西,但到目前为止还没有运气.
如果我将模板ID硬编码为id ="popover00.html",则popover有效但是当从ng-repeat生成相同的id时它不起作用.它正在服务器上查找文件.
Popover作品:
<div ng-repeat="(keyT, T) in Tdata track by $index">
<div ng-repeat="(keyS,S) in Sdata track by $index" popover-trigger="mouseenter" uib-popover-template={{"'popover"+keyT+keyS+".html'"}} >
<script type="text/ng-template" id="popover00.html">
<div>
This is an HTML <b>template</b><br>
</div>
</script>
</div>
</div>
弹出不工作:
<div ng-repeat="(keyT, T) in Tdata track by $index">
<div ng-repeat="(keyS,S) in Sdata track by $index" popover-trigger="mouseenter" uib-popover-template={{"'popover"+keyT+keyS+".html'"}} >
<script type="text/ng-template" id={{"popover"+keyT+keyS+".html"}}>
<div>
This is an HTML <b>template</b><br>
</div>
</script>
</div>
</div>