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

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

从指令模板

1 个答案: