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

debugcn 发表于 Dev

厄姆·珀西（Oam Psy）

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

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

谢谢

罗宾逊

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。