javascript - 在 AngularJS 中从 $parent 获取 Controller 名称

Question

我已将我的一个 Angular Controller 转换为 Controller As 语法，但我无法让 ng-grid 模板正常运行。

Controller 有一个叫做编辑用户的功能，看起来像这样

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;
        });
    };

ng-grid 模板看起来像这样

<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>

我的路线是这样的

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

所以问题出在我调用时的模板

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

它不知道我在说什么，除非我像这样包含 Controller 名称

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

然后效果很好。但是我不想将此模板直接绑定(bind)到 sc Controller 。如何在不使用 Controller 名称的情况下调用 editUser？

我希望 $parent 上有一个函数可以提供像

这样的函数名称

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

有什么建议吗？

Answer 1

您可以直接调用父作用域上的函数，而无需引用 $parent。因为稍后修改 View 结构时可能会遇到麻烦。

例子:

<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