CODEWITHSUNDEEP
javascriptangularjs
lvarayut
lvarayut

Reputation: 15249

Angular-ui modal: How to use the same controller?

Normally, I created a controller which used $scope syntax, so, I could pass a current $scope to a isolated scope of the modal directive as following:

$scope.openEditModal = function() {
    $scope.modalInstance = $modal.open({
        templateUrl: 'views/budgets/mainbudgets/edit',
        scope: $scope // Passing a $scope variable
    });

    $scope.modalInstance.close();
};

However, I just switched the controller to use this syntax: 

var self = this;
// User edit modal
this.openEditModal = function() {
    self.modalInstance = $modal.open({
        templateUrl: 'views/budgets/mainbudgets/edit',
        scope: self; // This doesn't work
    });

    self.modalInstance.close();
};

So, how can I pass a current this to be used in isolated scope of the modal directive?

EDIT

Here is the whole code of my controller:

angular.module('sms.budgets').controller('BudgetsMainController', ['$scope', 'Global', '$modal', '$timeout', '$rootScope','Budgets', function($scope, Global, $modal, $timeout, $rootScope,Budgets) {
    var self = this;
    this.newBudget = {};
    this.budgets = [];

    function init() {
        var data = {};

        // Load main budget from DB
        Budgets.load('main-budgets').success(function(budgets) {
            self.budgets = budgets || [];
        });
    }
    init();

    /**
     * Create a new main budget
     */
    this.create = function() {
        var data = {};
        data.budget = self.newBudget;
        data.dbName = 'Budget';
        Budgets.create('budgets', data).success(function() {
            self.isSuccess = true;
            $timeout(function() {
                self.isSuccess = false;
            }, 5000);
        }).error(function(err) {
            self.isError = true;
            $timeout(function() {
                self.isError = false;
            }, 5000);
        });
    };

    this.edit = function() {
        self.modalInstance.close();
    };

    // User edit modal
    this.openEditModal = function() {
        var newScope = $rootScope.$new();
        newScope.modalInstance = self.modalInstance;
        newScope.edit = self.edit;
        self.modalInstance = $modal.open({
            templateUrl: 'views/budgets/mainbudgets/edit',
            scope: newScope

        });

        self.modalInstance.close();
    };

    this.cancelEditModal = function() {
        self.modalInstance.dismiss('cancel');
    };

}]);

Upvotes: 0

Views: 1424

Answers (2)

Alex JM
Alex JM

Reputation: 1094

You can't use this as a scope. They are different. Since $scope is a internal variable of AngularJS you have to keep it as it.

To show that, I've created a Plunkr (open the console and see the diffence between this and $scope)

http://plnkr.co/edit/DkWQk4?p=preview

Anyway, is a good practise to use a different scope on the modal controller. Here you have an example showing how to communicate between the main controller and the modal controller:

From the MainCtrl:

var modalInstance = $modal.open({
  templateUrl: 'views/parts/modalUrlImg.html',
  controller: 'ModalUrlCtrl',
  resolve: {
    url: function () { // pass the url to the modal controller
      return $scope.imageUrl;
    }
  }
});

// when the modal is closed, get the url param
modalInstance.result.then(function (url) { 
    $scope.courses[i].imageUrl = url;
});

From the Modal Ctrl:

.controller('ModalUrlCtrl', function($scope, $modalInstance, url) {

  $scope.url = url; // get the url from the params

  $scope.Save = function () {
    $modalInstance.close($scope.url);
  };

  $scope.Cancel = function () {
    $modalInstance.dismiss('cancel');
  };

  $scope.Clean = function () {
    $scope.url = '';
  };
});

Hope this help you, cheers.

--- EDIT ---

You can keep the controller as syntax. In fact, you must mix both syntax, since you can only use this to add vars and functions, but not tu access other scope things, such as $scope.$on...

So, to do that in your case, just pass $scope:

var self = this;
// User edit modal
this.openEditModal = function() {
    self.modalInstance = $modal.open({
        templateUrl: 'views/budgets/mainbudgets/edit',
        scope: $scope;
    });

    self.modalInstance.close();
};

I've tried in the updated plunkr and it's working now:

http://plnkr.co/edit/DkWQk4?p=preview

Upvotes: 3

vader
vader

Reputation: 909

$scope != controller

By passing this to $modal.open() you are passing the reference of the controller and not the scope. Try passing $scope instead.

Upvotes: 0

Related Questions