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