Access parent controller in $uibmodal without using scope

Question

I have trouble in accessing the parent controller methods/variables inside $uibmodal

My HTML modal:

<div ng-controller="TestCtrl as vm">
  <div class="modal-demo lg">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">

      qweqweqweqweqw

      {{vm.test}}fwewewerwqqwer
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="vm.ok()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="vm.ok()">Cancel</button>
    </div>
  </div>
</div>

My controller:

AltoDevApp.controller('TestCtrl', ['$uibModal',
    function TestCtrl($uibModal) {
    $uibModal.open({
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              templateUrl: 'member/professional/profile/education/partials/upload.html',
              controller: angular.noop,
              controllerAs: 'vm'
            });

 vm.ok = function () {
    alert('hi');
  };
    }]);
})();

But it is not possible to access the vm.ok() from the model

Possible duplicate of [Pass current scope to modalInstance when using controllerAs syntax](http://stackoverflow.com/questions/33164281/pass-current-scope-to-modalinstance-when-using-controlleras-syntax) — Estus Flask, May 03 '17 at 15:22
Is there any specific reason that you don't want to pass $scope in $uibModal?? — Prateek Gupta, May 03 '17 at 15:25

georgeawg · Answer 1 · 2017-05-03T20:46:28.153

Use a different name for the controllerAs property in the modal definition object:

AltoDevApp.controller('TestCtrl', ['$uibModal',
  function TestCtrl($uibModal) {

    $uibModal.open({
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          templateUrl: 'member/professional/profile/education/partials/upload.html',
          controller: angular.noop,
          //controllerAs: 'vm'
          //USE different name
          controllerAs: 'modalvm'
     });

     var vm = this;    
     vm.ok = function () {
        alert('hi');
     };
}]);

When a child controller is bound to the same property name as the parent, the child property name (vm) hides the parent property name (vm). If the child is bound with a different name, the parent property can be accessed by prototypical inheritance.

For more infomation, see AngularJS Wiki - What are the nuances of scope prototypal inheritance.

Nested scopes is where we see great return from the Controller as syntax, often we’ve had to use the current scope’s $parent property to scale back up scopes to get where we need.

Things are far clearer and variables can be accessed properly across scopes:
<div ng-controller="MainCtrl as main">
  {{ main.title }}
  <div ng-controller="AnotherCtrl as another">
    Scope title: {{ another.title }}
    Parent title: {{ main.title }}
    <div ng-controller="YetAnotherCtrl as yet">
      Scope title: {{ yet.title }}
      Parent title: {{ another.title }}
      Parent parent title: {{ main.title }}
    </div>
  </div>
</div>
No hacky $parent calls. If a Controller’s position in the DOM/stack were to change, the position in sequential $parent.$parent.$parent.$parent may change! Accessing the scope lexically makes perfect sense.

— Todd Moto: Digging into Angular’s “Controller as” syntax (Nested scopes)

Access parent controller in $uibmodal without using scope

1 Answers1