AngularJS如何为Bootstrap模式创建可重用模板

Question

所以我使用AngularJS Bootstrap模式（http://angular-ui.github.io/bootstrap/）。哪些工作正常，但我想知道如果我可以创建一个可以采取标题和内容的基本模板。

然后它会填充我的模板与这些信息。该模板将有一个关闭按钮，取消按钮，覆盖等。有没有一种简单的方法来做这个AngularJS？

这是从示例中获取的，它与我所拥有的有关。我的内容位于templateUrl中。这将是很好的传递模态模板，所以我不必重新创建标题和关闭按钮为我创建的每个模式。

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: ModalInstanceCtrl, 
    size: size, 
    resolve: { 
    items: function() { 
     return $scope.items; 
    } 
    } 
}); 

Answer 1

发现了一种用指令来做到这一点。它打开一个带有模板的自定义指令的模式。然后，无论你在模态中有什么将被插入到你的自定义模板中。这很好，因为它不仅仅是一条消息。它可以填写表格，警报或任何你想要的。

这是我的指令：

app.directive('modalDialog', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     link: function(scope) { 
     scope.cancel = function() { 
      scope.$dismiss('cancel'); 
     }; 
     }, 
     template: 
     "<div>" + 
      "<div class='modal-header'>" + 
      "<h3 ng-bind='dialogTitle'></h3>" + 
      "<div ng-click='cancel()'>X</div>" + 
      "</div>" + 
      "<div class='modal-body' ng-transclude></div>" + 
     "</div>" 
    }; 
    }); 

模态（ 'yourTemplate.html'）：

<modal-dialog> 
    <div> Your body/message </div> 
</modal-dialog> 

的Javascript：

app.controller('YourController', ['$scope', '$modal', function($scope, $modal) { 
    $scope.openModal = function() { 
    $modal.open({ 
     templateUrl: 'yourTemplate.html', 
     controller: ModalController 
    }); 
    }; 
}]); 

var ModalController = function ($scope, $modalInstance) { 
    $scope.dialogTitle = 'Your title'; 
}; 

Answer 2

结帐约翰帕帕的热毛巾角BootStrap“模板”。你可以从那里把它捡起来：

https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/app/common/bootstrap/bootstrap.dialog.js