Angular-ui bootstrap modal without creating new controller Angular-ui bootstrap modal without creating new controller angularjs angularjs

Angular-ui bootstrap modal without creating new controller


It was possible in older version of UI-Bootstrap 0.10.0 .Even latest version,it works for me

index.html

<!-- if you are using Bower -->    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script><script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script><!-- modal --><!-- look at 'type' and 'id' values --><script type="text/ng-template" id="myTestModal.tmpl.html">    <div class="modal-header">        <h3>Modal Header</h3>    </div>       <div class="modal-body">        <p>Modal Body</p>    </div>    <div class="modal-footer">        <button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close        </button>        <button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something        </button>    </div> </script>

modalDemoController.js

$scope.openModal=function(){    $scope.modalInstance=$modal.open({        templateUrl: 'myTestModal.tmpl.html',        scope:$scope    });}$scope.close=function(){    $scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think};$scope.doSomething=function(){    //any actions to take place    console.log("Do Something");}


I haven't found a clean solution yet, the best workaround I found, to avoid writing the same code twice was to extend the modal controller like this:

$.extend(this, $controller('NormalCtrl', {$scope: $scope}));

full controller:

.controller('ModalCtrl', ['$scope', '$controller', '$modalInstance', function ($scope, $controller, $modalInstance) {    //with this line here:    // Initialize the super class and extend it.    $.extend(this, $controller('NormalCtrl', {$scope: $scope}));    // Opens a search result    $scope.openResult = function() {        $modalInstance.close($scope.selectedRow);    };    // Called when the cancel button is pressed    $scope.back = function() {        $modalInstance.dismiss('cancel');    };}]);

That way, I can re-use the same code, without having to rewrite it all over again and I can override the functions that I want to do smth different to the original controller.

Hope I helped some people out there,

Alex


Just write a function instead of creating new file:

 $scope.yourModal= function (data) {   var modalInstance = $modal.open({     template: '<div>Do you really want to hurt me? <div><button class="btn" ng-click="hurt(data)">Yes</button></div></div>',     controller: function($scope, scope){        $scope = scope;     },     resolve: {         scope: function () {            return $scope;         }     },     size: 'sm'   });   } $scope.hurt = function(data){     console.log(data); }