AngularJS将模态控制器内部的表单传递给模态外部的ng-controller

Question

So I am a bit confused as to why this doesn't work:

My main Angular page has an ng-controller called "SearchCtrl" which contains a bunch of logic for sending searches to a webserver.

app.controller('SearchCtrl', ['$http','$scope', function($http,$scope) {

$scope.doAlert = function() {
    console.log('search page alert inside searchresultsctrl');
}

This controller is included on my search page,and then somewhere down the page there is another controller, SearchSortModalCtrl, which will pop open a modal and let users do some stuff:

app.controller('SearchSortModalCtrl', function ($scope, $modal, $log) {
.....

var modalInstance = $modal.open({
        templateUrl: '/modal-search-sort.html',
        controller: 'SearchSortFormCtrl',
        size: size,
        resolve: {
            items: function () {
              return $scope.items;
            }
        }
    });

That is connected to this controller:

app.controller('SearchSortFormCtrl', ['$http','$scope','$rootScope','$modalInstance', function($http,$scope,$rootScope,$modalInstance) {

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

    $scope.doAlert2 = function() {
        console.log('search page alert test2');
    }

So anyhow, what I am trying to do is to put an ng-submit inside the modal form, and when that form is submitted, it will do some logic on the SearchCtrl.

But if I do

ng-submit="doAlert()"

inside my modal, it will not work or send anything to SearchCtrl, but if I change it to doAlert2() it will of course run on the SearchSortFormCtrl. I tried making it

ng-submit="$parent.doAlert()"

but no dice and to show you what level I'm flailing away on I even tried

ng-submit="$parent.$parent.doAlert()"

and that did nothing.

What am I doing wrong, or how can I get this form to just do stuff in the SearchCtrl?

Answer 1

Since your controller is a child controller of SearchCtrl , any of its descendants (except for isolated scoped directives) will automatically have doAlert function inherited. In your case you are not using scope option in modal settings so the modal scope will ultimately be $rootScope which angular ui modal does. You can provide a scope option in the settings from the controller. So:

Either set scope:$scope or if you do not want to pollute current controller scope with properties set by modal controller set a childscope, ie scope:$scope.$new() .

var modalInstance = $modal.open({
    templateUrl: '/modal-search-sort.html',
    controller: 'SearchSortFormCtrl',
    size: size,
    scope: $scope, //Or $scope.$new()
    resolve: {
        items: function () {
          return $scope.items;
        }
    }
});

Documentation link

scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope