Как получить дочерний контроллер для доступа к функции в родительском контроллере

Question

У меня есть простая установка родительского и дочернего контроллера, я пытаюсь заставить свой дочерний контроллер вызывать функцию в родительском контроллере:

HTML:

<div ng-controller="Parent>

    <p ng-hide="ribbonHide">{{ribbonMessage}}</p>

    <div ng-controller="Child">


    </div>

</div>

Parent.js:

app.controller('Parent', function($scope, $timeout) {
    $scope.searchRibbon = function() {
        return {
            default : function() {
                $scope.ribbonMessage = 'Welcome';
                $scope.ribbonHide = false;
            },
            clearMessage: function() {
                $scope.ribbonMessage = '';
            },
            hide: function() {
                $scope.ribbonHide = true;
            },
            autoRemove: function() {
                $timeout(function() {
                    $scope.searchRibbon.hide();
                    $timeout(function() {
                        $scope.searchRibbon.clearMessage();
                    }, 500);
                }, 5000);
            }
        }
    }
});

Child.js

app.controller('Child', function($scope, $timeout) {
    $scope.$parent.searchRibbon.autoRemove();
});

С учетом вышеизложенного я получаю сообщение об ошибке:

TypeError: $scope.$parent.searchRibbon.autoRemove is not a function

Спасибо

Answer 1

searchRibbon кажется, сама функция, которая возвращает ожидаемый объект. В качестве таких, $scope.$parent.searchRibbon().autoRemove() должно сработать.

Но это кажется странным. Вы уверены, что не хотите searchRibbon быть стандартным объектом?

$scope.searchRibbon = {
    default : function() {
        $scope.ribbonMessage = 'Welcome';
        $scope.ribbonHide = false;
    }, // ... the other ribbon properties go here
}

Если вам нужна область действия, предоставляемая функцией, вы можете найти что-то более похожее на:

$scope.searchRibbon = getSearchRibbon();

function getSearchRibbon() { // This should probably be in a Service
    return {
        default : function() {
            $scope.ribbonMessage = 'Welcome';
            $scope.ribbonHide = false;
        }, // ... the other ribbon properties go here
    }
}

Answer 2

Я заметил, что $scope.searchRibbon - это функция. В этом случае в дочернем процессе сначала необходимо вызвать функцию searchRibbon, а затем вызвать функцию скрытия.

$scope.$parent.searchRibbon().hide();

Или же вы можете объявить $scope.searchRibbon как объект, а не функцию (намного проще и избежать проблем с областями видимости).

angular.module("app", [])
  .controller('Parent', function($scope, $timeout) {
    $scope.searchRibbon = {
      default: function() {
        $scope.ribbonMessage = 'Welcome';
        $scope.ribbonHide = false;
      },
      clearMessage: function() {
        $scope.ribbonMessage = '';
      },
      hide: function() {
        $scope.ribbonHide = true;
      },
      autoRemove: function() {
        $timeout(function() {
          $scope.searchRibbon.hide();
          $timeout(function() {
            $scope.searchRibbon.clearMessage();
          }, 500);
        }, 5000);
      }
    }
  })
  .controller('Child', function($scope, $timeout) {
    $scope.$parent.searchRibbon.hide();
  });