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

【问题标题】：Access outside Controller from Directive template从指令模板访问控制器外部
【发布时间】：2017-02-06 19:03:44
【问题描述】：

我有以下 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",
        },
    };

但是，绑定仍然失败。有没有办法调试这个过程？你能告诉我最好的设计，以防我做错了吗？

【问题讨论】：

对传入整个控制器对象感到困惑。您的指令正在使用 controllerAs:'headerController'，因此您需要在视图中引用该对象或删除 controllerAs
是的，我也需要使用headerController，但也需要使用来自上部（包装）div 的pageController，因为PageName 在pageController 中。是否可以同时拥有两者（这就是我试图使用范围实现的目标）？
您将拥有 2 个不同的控制器实例，因此这对您不起作用。您需要通过服务从控制器到指令进行通信，将数据传递给指令或通过事件。不过，我建议您使用服务。祝你好运！
@Peter_Fretter 谢谢，会调查的。我正在使用 Google，但您是否针对我的特定目的推荐任何设计/设计模式/示例？
@Peter_Fretter 感谢您的回复，抱歉耽搁了，我一直很忙。你能把它作为一个答案，以便我标记它吗？ Service 对我来说就像一个魅力！

标签： angularjs binding scope

【解决方案1】：

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

【讨论】：