Question

我遇到了以前没见过的行为。我的页面上有一个按钮，用于打开模态。当我单击按钮时，模态会打开，但它会打开看似我的approval.tpl.html的副本。

我屏幕截图，但工作中的限制和所有。

我使用了ng-boilerplate进行设置。我的怀疑是行为是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>

Answer 1

使用此代码：

var taskInstance = $modal.open({
            templateUrl: 'modal/taskModal.tpl.html',
            controller: 'taskModalCtrl',
            size: 'sm',
            resolve: {
                items: function () {
                    return null;
                }
            }
        });

如果模板不在modal文件夹

中，则更改templateUrl

uiModal打开页面元素

1 个答案: