uModale Öffnung mit Seitenelementen

Question

Ich stoße auf ein Verhalten, das ich vorher nicht erlebt habe. Ich habe eine Schaltfläche auf meiner Seite, die eingerichtet wurde, um ein Modal zu öffnen. Wenn ich auf die Schaltfläche klicke, öffnet sich das Modal, aber es öffnet sich, was eine Kopie meiner approval.tpl.html zu sein scheint.

Ich würde es Screenshot aber Einschränkungen bei der Arbeit und alle.

Ich habe ng-boilerplate für das Setup verwendet. Mein Verdacht ist, dass Verhalten ist ein Ergebnis, wie ngbp ist Setup (möglicherweise mit Blick?), Aber ich bin ratlos, wie zu:

1. Fix dieses Verhalten
2. oder Verwendung modals richtig in ngbp

Hier ist, was ich denke, die entsprechenden Dateien sind:

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()); 
     }); 
    }; 
}]); 

Und nur damit Sie sehen können, ich nicht die html kopiert haben und vergessen, es zu löschen: 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

Verwenden Sie diesen Code:

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

Änderung templateUrl wenn Vorlage nicht in modal Ordner