CODEWITHSUNDEEP
angularjs
williamsandonz
williamsandonz

Reputation: 16420

How to declare Angular UI Modal outside of controller?

I'd like to have my Angular Ui Modal controller/object declared outside it's triggering controller (& in another file), without polutting the global namespace.

Is this possible? Is it possible to declare the modal controller like a regular controller and somehow pass parameters in (from my trigger controller)?

I currently have: (which ain't cool)

(function () {
    TriggeringCtrl.$inject = ['$scope', 'htmlClient', 'apiCall', '$timeout', '$modal', 'utility'];
    function TriggeringCtrl($scope, htmlClient, apiCall, $timeout, $modal, utility) {

   };
  app.controller('TriggeringCtrl', TriggeringCtrl);
  var ModalCtrl = function ($scope, $modalInstance, node, apiCall, utility) {
  }
});

Upvotes: 2

Views: 745

Answers (1)

igorzg
igorzg

Reputation: 1506

You have example here which is not global: http://plnkr.co/edit/fCfvcnwP9JSHbX5L2Vuu?p=preview

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal, $q, $timeout) {


  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: function ($scope, $modalInstance, items) {

        $scope.items = items;


        $scope.ok = function () {
          $modalInstance.close('item');
        };

        $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
        };
      },
      resolve: {
        items: function () {
          var p = $q.defer(); /// simulate data
          $timeout(function(){
            p.resolve(['item1', 'item2', 'item3']);
          });
          return p.promise.then(function(data){
            return data;
          });
        }
      }
    });
  };

});

Upvotes: 3

Related Questions