ui使用页面元素的模式打开
uiModal opening with page elements
我遇到了以前从未经历过的行为。我的页面上有一个按钮,用于打开模态。当我点击按钮时,模态打开,但它打开的似乎是我的approval.tpl.html的副本。
我会截屏,但工作上有限制。
我用了ng样板作为设置。我怀疑这种行为是ngbp如何设置的结果(可能有视图?),但我不知道:
- 修复此行为
- 或在ngbp内正确使用模态
以下是我认为的相关文件:
approval.tpl.html
<div class="row">
<h1 class="page-header">
Approval
<small>Configuration</small>
</h1>
<div class="section">
<div class="row">
<div class="panel panel-info" ng-repeat="task in approvalTaskArray">
<div class="panel-heading">
<h3 class="panel-title">Approval Task</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="panel-body">
<div class="thumbnail">
<div class="caption">
<span class="label label-default">Task Name</span>
<span><input type="text" class="form-control" ng-model="task.taskName" placeholder="e.g Manager Approval"></span>
<h4>Assignments</h4>
<span class="label label-default">Implementation</span>
<span><input type="text" class="form-control" ng-model="task.assignment.implementation" placeholder=""></span>
<h4>Arguments</h4>
<table class="table">
<tr><th>Order</th><th>Value</th></tr>
<tr ng-repeat="arg in task.assignment.arguments">
<td><span><input type="text" class="form-control" ng-model="arg.order" placeholder=""></span></td>
<td><span><input type="text" class="form-control" ng-model="arg.value" placeholder=""></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-click='addTask()'><i class="fa fa-plus"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
approval.js
angular.module( 'integration.approval', [
'ui.router',
'placeholders',
'ui.bootstrap',
'integration.approval.modal'
])
.config(function config( $stateProvider ) {
$stateProvider.state( 'approval', {
url: '/approval',
views: {
"main": {
controller: 'ApprovalCtrl',
templateUrl: 'approval/approval.tpl.html'
}
},
data:{ pageTitle: 'Approvals' }
});
})
.controller( 'ApprovalCtrl', ['$scope' , '$modal', '$log', function($scope, $modal, $log) {
$scope.approvalTaskArray = [{
"taskName" : "Manager Approval",
"assignment" : {
"impelmentation" : "Testing",
"arguments" : [
{"order" : "1","value" : "Test"}
]}
}];
$scope.addArg = function(){
var args = {"order" : "1","value" : "Test"};
};
$scope.addTask = function() {
var taskInstance = $modal.open({
templateUrl: 'index.html#/approval/modal/taskModal.tpl.html',
controller: 'taskModalCtrl',
size: 'sm',
resolve: {
items: function () {
return null;
}
}
});
taskInstance.result.then(function () {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
只是为了让你看到我没有复制html,忘记删除它:taskModal.tpl.html
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h1>Test</h1>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
使用此代码:
var taskInstance = $modal.open({
templateUrl: 'modal/taskModal.tpl.html',
controller: 'taskModalCtrl',
size: 'sm',
resolve: {
items: function () {
return null;
}
}
});
如果模板不在modal
文件夹
相关文章:
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- 如何在不同的设备模式下强制元素的高度
- 在模式框打开之前更改 SVG 元素的颜色,并在框打开时保持该颜色
- 复制要在模式框中显示的父元素
- 输入元素模式属性的Javascript正则表达式在reFiddle上有效,但在页面上无效
- 试图通过模块模式在DOM元素上实现change()事件
- 事件委派模式,在按钮中使用 addEventListener 和嵌套元素
- 查找具有与模式匹配的属性的元素
- 引导模式元素选择
- 使用引导模式防止父 onclick 事件从子元素传播
- 无法在无头模式下使用 watir Webdriver 执行按钮元素的 onclick 事件 javascript
- 弹出模式仅适用于表格中的第一个元素,第二次单击后不会再次打开
- 设计模式下的浏览器将孤立的 LI 元素包装在 UL - Firefox 和 Chrome 中
- 我将如何移动带有元素的 SVG 模式
- 从嵌套数组中获取唯一元素的 JS 模式是什么
- 具有DOM元素的模块化模式
- 如何使用VideoJS使元素在全屏模式下可见
- 如何从单击的元素开始重新启动顺序模式
- 使用拉斐尔在svg中创建一个模式元素