uiModal打開頁面元素

Question

我遇到了以前沒有遇到過的行爲。我的頁面上有一個按鈕，用於打開模式。當我點擊按鈕時，模式會打開，但它會打開看起來似乎是我的approval.tpl.html副本的內容。

我會截圖，但在工作和所有的限制。

我使用ng-boilerplate進行設置。我懷疑是行爲的ngbp如何設置（可能有意見？）的結果，但我很茫然爲：

1. 修復此行爲
2. 或使用模態正常範圍內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; 
       } 
      } 
     }); 

變化templateUrl如果模板沒有modal文件夾