javascript - 无法访问元素父 Controller

Question

我正在关注tutorial使用 AngularJS 的 sidenav 实现下拉菜单。我在我的应用程序中使用了组件，因此我的布局与提供的示例不同。

ul 已填充对象中存储的名称，但函数失败。我缩小了范围，找出错误是由于无法找到指令父元素 Controller 造成的。

var controller = $element.parent().controller();

当我在控制台中登录controller时，它应该显示 Controller 功能:

vm.isOpen = isOpen;
vm.toggleOpen = toggleOpen;
vm.autoFocusContent = false;
vm.menu = mainNavService;
vm.status = {
    isFirstOpen: true,
    isFirstDisabled: false
};

但它返回的是空对象。是不是因为我没有使用 Controller ，而是在模块上使用 Angular 的组件方法并使用 Controller 属性？

问题

为什么当尝试访问 Controller 时，它没有返回任何属性？

app.component('mainnav', {
    templateUrl: 'p3sweb/app/components/app/views/main-nav.htm',
    controller: ['userService', 'mainNavService', function(userService, mainNavService){

        var vm = this;

        vm.isOpen = isOpen;
        vm.toggleOpen = toggleOpen;
        vm.autoFocusContent = false;
        vm.menu = mainNavService;
        vm.status = {
          isFirstOpen: true,
          isFirstDisabled: false
        };
        function isOpen(section) {
            console.log('menu.isSectionSelected(section)')
          return menu.isSectionSelected(section);
        }
        function toggleOpen(section) {
                console.log(menu.toggleSelectSection(section))
          menu.toggleSelectSection(section);
        }
    }]
})

app.directive('menuToggle', [ '$timeout', function($timeout){
    return {
        scope: {
            section: '='
        },
        templateUrl: 'p3sweb/app/components/app/views/main-nav-li.htm',
        link: function($scope, $element) {

            var controller = $element.parent().controller(); //FAILS

            $scope.isOpen = function() {
                return controller.isOpen($scope.section)
            };
            $scope.toggle = function() {
                console.log(controller.toggleOpen())
                controller.toggleOpen($scope.section);
            };
        }
    };
}])

Answer 1

JavaScript 上下文可以很容易地传递。你能做的是，改变你的menuToggle指令如

app.directive('menuToggle', [ '$timeout', function($timeout){
    return {
        scope: {
            section: '=',
            context: '=' // NOTE: This is what the parent component will pass
        },
        templateUrl: 'p3sweb/app/components/app/views/main-nav-li.htm',
        link: function($scope, $element) {
            var controller = $scope.context; // This is reference to parent
            $scope.isOpen = function() {
                return controller.isOpen($scope.section)
            };
            $scope.toggle = function() {
                console.log(controller.toggleOpen())
                controller.toggleOpen($scope.section);
            };
        }
    };
}])

在你的 main-nav.htm 里面你需要做


<menu-toggle section="blah" context="$ctrl"></menu-toggle>


编辑::

功能$scope.isOpen和$scope.toggle也是不必要的。 (除非您有一些特定的要求以现在的方式使用它们)

在您的 main-nav-li.htm 中无论您在哪里找到isOpen()将其替换为 context.isOpen(section)无论你在哪里 toggle() ，将其替换为 context.toggle(section)