AngularJS cách tạo mẫu tái sử dụng cho kiểu Bootstrap

Question

Vì vậy, tôi đang sử dụng phương thức AngularJS Bootstrap (http://angular-ui.github.io/bootstrap/). Đó là làm việc tốt nhưng tôi đã tự hỏi nếu tôi có thể tạo ra một mẫu cơ bản có thể mất trong một tiêu đề và nội dung.

Sau đó, nó sẽ điền mẫu của tôi với những thông tin này. Các mẫu sẽ có một nút đóng, nút hủy bỏ, lớp phủ, vv Có cách nào dễ dàng để làm điều này AngularJS?

Điều này được lấy từ ví dụ và đó là về những gì tôi có. Nội dung của tôi nằm trong templateUrl. Nó sẽ là tốt đẹp để vượt qua trong các mẫu phương thức vì vậy tôi không phải tiếp tục tái tạo tiêu đề và nút đóng cho mọi phương thức tôi tạo ra.

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

Answer 1

Tìm thấy một cách để làm điều đó với chỉ thị. Nó mở ra một phương thức với một chỉ thị tùy chỉnh có một mẫu. Sau đó, bất cứ điều gì bạn có trong phương thức của bạn sẽ được chèn vào mẫu tùy chỉnh của bạn. Điều này là tốt đẹp bởi vì nó giữ nhiều hơn chỉ là một tin nhắn. Nó có thể được lấp đầy với các hình thức, cảnh báo, hoặc bất cứ điều gì bạn muốn.

Đây là chỉ thị của tôi:

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>" 
    }; 
    }); 

Modal ('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

Thanh toán Khăn giấy của John Papa Angular BootStrap "template". Bạn có thể nhặt nó lên từ đó:

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