从角度服务中调用控制器中方法的最佳方法是什么？

Question

I've done some research on this question both in SO and on Google as well. But none of the answers serve my purpose.

I have a modal in an HTML view, which I use to show popup notifications in my app. I want to show some buttons ('OK', 'Cancel', 'Login', etc.,) in a div on modal which I pass dynamically as a JS object. Name of the button being the key and the callback function being the value.

Examples:

{
    "Login": function(){....}
}

{
    "OK": function(){...},
    "Cancel": function(){...}
}

Now I pass this kind of objects to a method showPopup(message, buttonMap) in the controller of the popup modal I have in view.

message being the display message on the popup and buttonMap being the object in examples.

Controller:

angular.module('core').controller('PopupController', ['$rootScope', 'LogService', 'MessageHandlerService',
    function ($rootScope, LogService, MessageHandlerService) {    
        var ctrl = this;

        ctrl.buttonMap = {};
        ctrl.btnWidth = 100;

        $rootScope.$on('popup', showPopup);

        function showPopup (event, message, buttonMap) {
            $('#genericModalDialog .popup-content p').html(message);
            ctrl.buttonMap = buttonMap;
            var numberOfButtons = Object.keys(buttonMap).length;
            ctrl.btnWidth = (100 - numberOfButtons*2)/numberOfButtons;
            $("#genericModalDialog").modal('show');
        }

        ctrl.callbackFor = function callbackFor(key) {
            ctrl.buttonMap[key].call(null);
        };
    }
]);

Service:

    angular.module('core').service('PopupService', ['$rootScope', 'LogService', 'CacheService', 'MessageHandlerService',
        function ($rootScope, LogService) {

            this.isPopupShown = function (){
                return $("#genericModalDialog").hasClass('in');
            }

            this.showPopup = function (message, btnMap){
                $rootScope.$broadcast('popup', message, btnMap);
            }

            this.closePopup = function (){
                $("#genericModalDialog").modal('hide');
            }

        }
    ]);

View:

<div ng-controller="PopupController as popupCtrl" class="modal fade" id="genericModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center" style="width:94%;">
      <div class="modal-content">
        <div class="modal-body">
          <br/><br/>
          <div class="popup-content">
            <p align="center"></p><br/>
            <div class="popup-action">
              <button type="button" class="btn" style="width:{{popupCtrl.btnWidth}}%; margin:1%" ng-repeat="(buttonName, callBack) in popupCtrl.buttonMap" ng-click="popupCtrl.callbackFor(buttonName)">{{buttonName}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Since I don't want to instantiate PopupController in every other controller/service, I've written a service called PopupService which has a method that can called and will $broadcast an event called "popup" on $rootscope and I am handling this event in PopupController . Everything is triggered and working properly in this case. The only problem I face is the delay in rendering the popup on the UI, I see the message as soon as the popup is displayed but the rendering of buttons is very slow (approx 3 secs) this is because of loading of some other web page in the background.

When I searched about the issue on the internet I also found this total setup can be changed to a directive and the rendering of dynamic content (in this case the popup and buttons on it.) could be placed in a link function of the directive.

Another approach I saw was directly handling the DOM manipulation in the service which of course is not a good way.

Did I miss any other approach or a solution to this issue?

All I want to know is what would the best way be, to handling this situation which is programmatically and design wise good.

If I am not clear please let me know. I'll try explaining the problem again.

Answer 1

Directive would be a much better choice that the DOM manipulation. Additionally you should consider changing the usage of jQuery dialog into a https://angular-ui.github.io/bootstrap/#/modal .

Here is an example how it can be done:

1) Create the directive

 app.directive('myModal', function() {
   return {
     restrict: 'E',
     scope: {
       items: "=",
       message: "="
     },
     replace: true,
     templateUrl: "directiveTemplate.html",
     controller: function($scope, $uibModal, $log) {

       $scope.open = function(size) {

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

         modalInstance.result.then(function(selectedItem) {
           $scope.button = selectedItem.name;
           $scope[selectedItem.callback](selectedItem.name);
         });
       };

     }
   }
 });

2) Create modalInstance directive

app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items, message) {

  $scope.items = items;
  $scope.message = message;

  $scope.close = function(item) {
    $uibModalInstance.close(item);
  };
});

3) create directive template directiveTemplate.html

<div>
  {{buttonClicked}}
  <br> {{button}}

  <button type="button" class="btn btn-default" ng-click="open('sm')">{{message}}</button>
</div>

4) create popup template 'myModalContent.html'

{{message}}
<button ng-repeat="item in items" type="button" class="btn btn-default" ng-click="close(item)">{{item.name}}</button>

5) define you controller where you will have list of buttons and message to be displayed in the popup (for demo purpose here are two different list of items and two messages)

 app.controller('ModalDemoCtrl', function($scope) {
   $scope.message = "modal 1";
   $scope.items = [{
     name: 'item1',
     callback: "test1"
   }, {
     name: 'item2',
     callback: "test2"
   }, {
     name: 'item3',
     callback: "test3"
   }];

   $scope.message2 = "modal 12222";
   $scope.items2 = [{
     name: 'item1222',
     callback: "test1"
   }, {
     name: 'item2222',
     callback: "test2"
   }, {
     name: 'item3222',
     callback: "test3"
   }];

   $scope.test1 = function(message) {
     $scope.buttonClicked = "clicked test1";
   }
   $scope.test2 = function(message) {
     $scope.buttonClicked = "clicked test2";
   }
   $scope.test3 = function(message) {
     $scope.buttonClicked = "clicked test3";
   }

 });

and in order to you the directive you need:

<div ng-controller="ModalDemoCtrl">
  <my-modal items="items" message="message"></my-modal>
    </br>
  <my-modal items="items2" message="message2"></my-modal>
</div>

If you have directive accessed from different angular application instances, than just inject directive application into the needed one (make sure the directive and modal instance to have a their own defined module ex: var app = angular.module('myPopupDynamicModule', ['ngAnimate', 'ui.bootstrap']); and this is the one to be used for injection into other modules following this example: var app2 = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'myPopupDynamicModule']); )