Getting controller name from $ parent in AngularJS

Question

I converted one of my Angular controllers to Controller As syntax, but I find it difficult to get the ng-grid pattern to play beautifully.

The controller has a function called the edit user, which looks like this:

self.editUser = function (user_data) {
    var modalInstance = $modal.open({
        templateUrl: '/admin/views/adminuser.html',
            controller: 'AdminUserController',
            resolve: {
                user_data: function () {
                    return user_data;
                }
            }
        });

        modalInstance.result.then(function () {
            self.myQueryData.refresh = !self.myQueryData.refresh;
        });
    };

The ng-grid template looks like this:

<div class="ngCellText" ng-class="col.colIndex()">
    <a ng-click="$parent.$parent.$parent.$parent.editUser({user_id:row.entity.id, first_name:row.entity.first_name, last_name:row.entity.last_name, email:row.entity.email})">
        <span ng-cell-text translate>Edit</span>
    </a>
</div>

and my route is as follows

.when('/admin/settings', {
    templateUrl: '/admin/views/settings.html',
    controller: 'SettingsController as sc',
})

So the problem is the pattern on call

$parent.$parent.$parent.$parent.editUser 

he doesn’t know what I'm talking about unless you include the controller name, for example

$parent.$parent.$parent.$parent.sc.editUser, 

then it works great. However, I do not want to bind this pattern directly to the sc controller. How can I call editUser without using a controller name?

I was hoping there would be a function on the parent element of $ that would supply the name of the function, e.g.

$parent.$parent.$parent.$parent.getController().editUser

Any suggestions?

Answer 1

controllerAs, , :

<a ng-click="sc.editUser({user_id:row.entity.id, first_name:row.entity.first_name, last_name:row.entity.last_name, email:row.entity.email})">

Hide result

Answer 2

, $parent. , .

:

     

<div ng-app="MyApp">
<div ng-controller="MyController">
    {{myMessage}}
    <div ng-controller="MyController2">
        <div ng-controller="MyController3">
            <div ng-controller="MyController4">
                <button id="myButton" ng-click="setMessage('second')">Press</button>
            </div>
        </div>
    </div>
    <script>
        angular.module('MyApp', [])
           .controller('MyController', function($scope) {
            $scope.myMessage = "First";
               $scope.setMessage = function(msg) {
                $scope.myMessage = msg;
               };
        }).controller('MyController2', function($scope) {

           }).controller('MyController3', function($scope) {

           }).controller('MyController4', function($scope) {

           });
    </script>

</div>
</div>

angular $broadcast