2

我有一个名为的指令<popup>，其中包含许多<popup-link>-directives。单击a 时，应通过调用其控制器上的函数来关闭<popup-link>父指令。<popup>close()

出于某种原因，我无法获取 的控制器实例<popup>，因为它没有正确注入到 的链接功能<popup-link>

我收到以下错误，检查对象会产生instantiate.c吗？

对象 [对象对象] 没有方法“关闭”

我究竟做错了什么？

directive('popup', function () {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        template: '<div id="{{ popupId }}" class="navigatorPopup" ng-transclude></div>',
        controller: function ($scope) {
            $scope.close = function () {
                //close popup
            };
        },
        link: function (scope, element, attr) {
            //
        }
    }
}).
directive('popupLink', function () {
    return {
        restrict: 'EA',
        require: '^popup',
        template: '<h3 ng-bind="title"></h3>',
        replace: true,
        scope: {
            title: '@',
            ngClick: '&'
        },
        link: function (scope, element, attr, popupCtrl) {
            scope.popupCtrl = popupCtrl;
            element.bind('click', 
                function () {
                    scope.popupCtrl.close();
                    scope.ngClick();
                }
            );
        }
    }
});

和 HTML

<popup name="menuNavigator">
   <popup-link ng-repeat="category in getCategories()" title="{{ category.Title }}" ng-click="navigateMenu($index)"></popup-link>
</popup>

谢谢！

4

2 回答 2

2

子控制器需要父控制器的实例。将父控制器的“公共”组件视为公共组件。

更改$scope.close = function(){..}为this.close = function(){..}

此外，不必像在子链接函数中那样显式设置popupCtrl为本地范围。您可以通过以下方式直接访问父函数：

popupCtrl.close()

除非您只是喜欢这种命名约定...

演示

于 2013-07-13T23:24:50.943 回答
1

您没有scope.$apply在点击处理程序中包装周围的方法：

element.bind('click', 
    function () {
        scope.$apply(function(){
            scope.popupCtrl.close();
            scope.ngClick();
        });
    }
);

您需要使用 scope.$apply 方法包装发生在 AngularJS 的$apply/$digest 循环之外的任何代码，以便 Angularjs 知道更改已经发生。

编辑：

对不起，我误读了问题。

发生这种情况的原因是您将函数放在范围属性而不是控制器上：

controller: function ($scope) {
    $scope.close = function () {
        //close popup
    };
},

应该：

controller: function ($scope) {
    this.close = function () {
        //close popup
    };
},
于 2013-07-14T00:07:35.443 回答