Hi Folks!
I am trying to
1 - wrap the UI Bootstrap modal service in my own service, limiting the
configuration to only a few params that I allow
2 - extending whatever controller is passed to the modal, and force the
controllerAs syntax in the underlying modal service
The issue that I am having is I guess more of a JS issue then an angular
issue, but I feel like someone here must have tried to extend a controller
similar to this before me, and have some feedback for me.
Here is the trouble code (stripped down a but from original)
I receive a controller from the caller of my service, instantiate it with
$controller and extend <MY> controller, with the passed in controller.
function getControllerClass(conf) {
var that = this;
return function ModalController($scope, $modalInstance) {
conf.modalInstance = $modalInstance;
this._modalManager = new ModalManager(conf);
that._modalManager = this._modalManager;
if (conf.controller) {
angular.extend(this, $controller(conf.controller, {
$scope: $scope,
modalManager: this._modalManager
}));
}
this.close = hitch(this, function(data) {
this._modalManager.close(data);
$templateCache.remove(this.templateUrl);
});
};
}
This mostly works fine, except that if I, as a user of the wrapped modal
service, create a controller like this (below), then I have a closure
problem.
In this case, from within the function buttonHandler, the 'this.inputText'
is actually referring to the closed scope of the DataValidationController,
and not the underlying, extended ModalController.
function DataValidationController(modalManager, $q) {
this.inputText = "initial value";
function buttonHandler(buttonId) {
if (buttonId === 'save') {
var deferred = $q.defer();
if (this.inputText === 'bla') {
deferred.resolve(this.inputText);
} else {
deferred.reject(); //
}
return deferred.promise;
}
}
modalManager.setButtonHandler(hitch(this, buttonHandler));
}
Note: Hitch is like bind
So far I have a solution, but its sooooo ugly :( What I can do is this:
Instantiate the controller with the "scope"
if (conf.controller) {
angular.extend(this, $controller(conf.controller, {
$scope: $scope,
modalManager: this._modalManager,
myScope: this
}));
}
Then force the user to use that scope for everything
function DataValidationController(modalManager, $q, myScope) {
myScope.inputText = "initial value";
function buttonHandler(buttonId) {
if (buttonId === 'save') {
var deferred = $q.defer();
if (myScope.inputText === 'bla') {
deferred.resolve(myScope.inputText);
} else {
deferred.reject(); //
}
return deferred.promise;
}
}
modalManager.setButtonHandler(buttonHandler);
}
... but as I said, this is pretty awful to ask users to create controllers,
but not use "this" inside functions passed to my modalManager instance...
Does anyone know either how to make this work cleanly, and just a better
pattern to extend a controller (class)?
Thanks!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
