Làm thế nào để sử dụng Angular-Strap để tạo ra một phương thức với bộ điều khiển?

Question

Tôi đang đấu tranh để tìm đúng cách để sử dụng phương thức Dây đeo góc/sang một bên với bộ điều khiển.

Có, mã gọi có thể tiêm $scope, làm cho nó có sẵn cho phương thức. Nhưng có vấn đề với điều đó.

myModal = $modal({ 
scope: $scope, 
template: 'template.html', 
show: false, 
backdrop: "static", 
keyboard: false, 
persist: true 

});

Điều này sẽ làm ô nhiễm bộ điều khiển cuộc gọi với các phương thức và thuộc tính có khả năng chỉ có phương thức.

Tôi thường sử dụng "controllerAs" và do đó thậm chí không có $scope để đưa vào phương thức ngay từ đầu!

Bạn có thể tạo $scope mới và sau đó chèn phương thức vào đó, nhưng một lần nữa, điều đó sẽ yêu cầu tiêm $scope vào bộ điều khiển chính. Tệ tệ tệ.

Nếu tôi sử dụng ng-controller bên trong mẫu phương thức, tôi có thể có bộ điều khiển của mình. Nhưng anh ấy đưa cho tôi một vấn đề khác: bây giờ tôi không thể tiêm dữ liệu vào bộ điều khiển phương thức, và không có cách nào mã gọi của tôi có thể biết khi phương thức được đóng lại và trả về dữ liệu từ phương thức cũng trở thành việc vặt (liên quan đến một nhà máy chỉ để giữ đồng bộ dữ liệu bộ điều khiển con và bộ điều khiển con).

Tôi thực sự đang gặp khó khăn về cách làm điều này một cách tốt nhất.

Bất kỳ ý tưởng nào?

Cheers

Cập nhật

Đây là cách tôi làm điều đó cho bây giờ:

Trong mẫu của tôi tôi thực hiện một chỉ thị mà mở ra phương thức.
Ví dụ:

<my-modal 
     on-update="ctrl.OnDialogUpdate"> 
</my-modal> 

Vì vậy, về cơ bản các chỉ gọi phương thức của tôi và khi các phương thức đóng hoặc muốn trở lại với một kết quả, nó gọi phương thức quy định trong tham số chỉ thị.

Đây là cách chỉ có thể xem xét:

(function() { 

'use strict'; 

angular.module('app').directive('myModal',myModal); 

function myModal(){ 

    return { 

     restrict: 'E', 

     // The modal callback specified in the directive tag 
     scope: { 
      onUpdate: '&?' 
     }, 

     replace: true, 

     // This is the template for the directive, not the modal 
     templateUrl: 'button.html', 

     controllerAs: 'ctrl', 

     bindToController: true, 

     compile: function (element, attrs) { 

      return function (scope, element, attrs) { 

      }; 
     }, 


     /*@ngInject*/ 
     controller: function($scope, $log, $aside){ 

      var self = this; 

      var myDialog = $aside({ 

       // Dialog template 
       template: 'my-modal.template.html', 
       show: false, 
       animation: 'am-fade-and-slide-right', 
       placement: 'right', 
       backdrop: true, 
       html: true, 
       container: '', 
       scope: $scope 
      }); 


      // Opens modal 
      self.ShowDialog = function(){ 
       myDialog.$promise.then(function() { 
        myDialog.show(); 
       }) 
      }; 


      // Expose Update() method to the dialog template 
      $scope.Update = function(){ 

       if(angular.isFunction(self.onUpdate)) { 

        self.onUpdate()(); 
       } 

      } 

     } 
    } 

} 

})(); 

Answer 1

Chỉ cần sử dụng 'điều khiển' tùy chọn:

$scope.showModal = function() { 
    $modal({ 
    title: 'My Title', 
    content: 'My Content', 
    show: true, 
    controller: 'ModalCtrl' 
    }); 
}; 

Here's a plnkr

Answer 2

Bạn cũng có thể thử sử dụng:

var modal= $modal({ 
      templateUrl: '.../../xxx.modal.html', 
      show: false, 
      backdrop: 'static', 
      controller: 'anyCtrl as vm' 
     }); 

Trong trường hợp này, hộp thoại phương thức của bạn sẽ có phạm vi của bộ điều khiển "anyCtrl". Trong mẫu, bạn chỉ có thể sử dụng vm.title hoặc các thuộc tính khác được định nghĩa trong bộ điều khiển.