从指令模板访问外部控制器

Question

我有以下HTML页面(主页，其中HeaderController在PageController中)：

<div ng-controller="PageController as pageController">
    <page-header ng-cloak></page-header>
</div>

这是我的PageController，里面有一个PageName属性：

export class PageController {

    public static ControllerDeclaration = ["$http", "$scope", PageController];

    public PageName: string = "New Page";

    constructor(private $http: angular.IHttpService, private $scope: angular.IScope) {
    }

}

对于pageHeader指令，我使用以下模板，该模板希望从外部访问pageController：

        <a class="page-edit">
            <span class="page-name">
                {{pageController.PageName}}
            </span>

            <i class="fa fa-pencil"></i>
        </a>

但是，该绑定将导致空白，而不是页名。所以我想它无法理解pageController。

在StackOverflow文章中搜索，我尝试通过将以下声明添加到主页HTML中来使用作用域：

<div ng-controller="PageController as pageController">
    <page-header page-controller="pageController" ng-cloak></page-header>
</div>

并按照指令：

.directive("pageHeader", Directives.PageHeader)

// This is Directives.PageHeader function:
return {
        templateUrl: "/Scripts/angular-app/templates/page/header.html",
        restrict: "E",
        controller: Controllers.HeaderController.ControllerDeclaration,
        controllerAs: "headerController",
        scope: {
            pageController: "=pageController",
        },
    };

但是，绑定仍然失败。是否有方法调试此进程？如果我做错了，你能告诉我最好的设计吗？

Answer 1

您将有两个不同的控制器实例，因此对您不起作用。您需要通过服务、将数据传递给指令或通过事件从控制器到指令进行通信。不过，我建议您使用服务。祝好运!