javascript - 如何让子控制器访问父控制器中的功能

Question

我有一个简单的父子控制器设置，我试图让我的子控制器调用父控制器中的函数：

HTML：

<div ng-controller="Parent>

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

    <div ng-controller="Child">


    </div>

</div>

父.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 是一个函数。在这种情况下，在 child 中，您首先需要先调用 searchRibbon 函数，然后调用 hide 函数

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