Phương thức tái sử dụng trong Angular/Ionic

Question

Trong AngularJS với Ionic, tôi muốn có thể gọi một phương thức từ các bộ điều khiển khác nhau mà không phải lặp lại mã liên quan đến phương thức.

Dưới đây là cách tạo phương thức (viết tắt từ http://learn.ionicframework.com/formulas/making-modals/).

HTML:

<div class="card" ng-controller='MainCtrl' ng-click="openModal()"> 
    Click here to open the modal 
</div> 

JS:

app.controller('MainCtrl', function($scope, $ionicModal) 
{ 
    $ionicModal.fromTemplateUrl('contact-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal 
    }) 

    $scope.openModal = function() { 
     $scope.modal.show() 
    } 

    // functions for this modal 
    // ... 
}) 

Bây giờ đó là tất cả tiền phạt một tốt, nhưng nếu tôi muốn mở modal cùng với cùng chức năng từ một bộ điều khiển khác nhau, tôi sẽ phải sao chép tất cả các mã liên quan đến nó.

Tôi làm cách nào để tóm tắt điều này để làm cho các mô hình của mình có thể sử dụng lại và có thể gọi từ các bộ điều khiển khác nhau?

Lý tưởng nhất, tôi muốn mỗi phương thức có "bộ điều khiển" riêng của mình (hoặc khái niệm tương tự), thay vì phải đặt tất cả mã của nó vào bộ điều khiển của bất kỳ thứ gì muốn mở nó.

Answer 1

Đây là kịch bản hoàn hảo cho Chỉ thị.

Chỉ thị Mã số:

app.directive('myPopUp', ['$ionicModal', function($ionicModal) { 

    return { 
     restrict: 'E', 
     scope: { 
      externalScope : "=" 
     } 
     replace: true, 
     templateUrl: 'path/to/your/template', 
     link: function($scope, $element, $attrs) { 

      $ionicModal.fromTemplateUrl('contact-modal.html', { 
       scope: $scope.externalScope, 
       animation: 'slide-in-up' 
      }).then(function(modal) { 
       $scope.modal = modal 
      }); 

      $scope.externalScope.openModal = function() { 
       $scope.modal.show() 
      }; 

     } 
    }; 
}]); 

Và điều khiển của bạn (s):

app.controller('MainCtrl', ['$scope', function($scope) { 

    $scope.externalScope = {} 

}); 

Bất cứ khi nào bạn muốn bao gồm này trong phần chỉ cần thêm:

<my-pop-up externalScope="externalScope"></my-pop-up> 

Chỉ thị sẽ có quyền truy cập vào bộ điều khiển và ngược lại thông qua thuộc tính externalScope. Bạn có thể gọi $scope.externalScope.openModal() từ bộ điều khiển của bạn và nó sẽ kích hoạt phương thức chỉ thị của bạn để mở.

Hy vọng điều này hữu ích.

Answer 2

Cách tôi làm điều đó là một dịch vụ

app.service('ModalService', function($ionicModal, $rootScope) { 


    var init = function(tpl, $scope) { 

    var promise; 
    $scope = $scope || $rootScope.$new(); 

    promise = $ionicModal.fromTemplateUrl(tpl, { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal; 
     return modal; 
    }); 

    $scope.openModal = function() { 
     $scope.modal.show(); 
    }; 
    $scope.closeModalService = function() { 
     $scope.modal.hide(); 
     //$scope.modal.remove(); 
    }; 
    $scope.$on('$destroy', function() { 
     //$scope.modal.remove(); 
    }); 

    return promise; 
    } 

    return { 
    init: init 
    } 

}) 

Làm thế nào để sử dụng nó trong một bộ điều khiển

app.controller('editMyProfileCtrl', function($scope,ModalService) { 

    $scope.openModal = function() { 
    ModalService 
     .init('my-modal.html', $scope) 
     .then(function(modal) { 
      modal.show(); 
     }); 
    }; 
    $scope.closeModal = function() { 
    $scope.closeModalService(); 
    }; 

})