uiModalページ要素を含むオープニング

Question

私は前に経験したことのない動作に陥っています。私はモーダルを開くためにセットアップされている私のページにボタンがあります。ボタンをクリックすると、モーダルが開きますが、私のapproval.tpl.htmlのコピーが表示されます。

私はそれをスクリーンショットしましたが、仕事やすべての制限があります。

セットアップにng-boilerplateを使用しました。私の疑惑は、その行動がngbpセットアップ（？おそらく景色を望む）であるかの結果であるが、私はのよう途方に暮れています：ngbp 内

または使用モーダル適切

1. 修正この振る舞い ここ

   は、私は、関連するファイルがあると思いますものです：

   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フォルダ