Question

有一段时间了，我一直在关注我非常喜欢的Angular指令TypeScript模式。我通过创建一个新的控制器给指令自己隔离scope。

我遇到的情况是我需要从指令的外部调用我的Angular指令中的函数。

例如，我有一个非常简单的函数，可以在我的指令中打开一个弹出窗口。指令的控制器有类似的东西：

public openPopup() {
    this.uiClasses.popup = "open";
}

相应的视图有一些值得注意的元素，如：

<div ng-click="vm.openPopup()">Open the pop up</div>
<div ng-class="vm.uiClasses.popup">the actual popup</div>

使用一些非常基本的CSS，这就像一个魅力。但是，如果我有一个创建该指令的控制器，并希望触发指令的openPopup函数，该怎么办？我想做这样的事情：

class PageController {
    private scope: any = null;
    static $inject = ["$scope"];

    constructor($scope: any) {
        $scope.vm = this;
    }

    public openTheDirectivePopup() {
        // from here, how can I call the openPopup on a specific directive?
    }
}

相应的观点：

<div ng-click="vm.openTheDirectivePopup()">I can open the popup inside the custom directive</div>
<my-custom-directive></my-custom-directive>

我还希望能够在同一页面上拥有这些指令的多个实例而不会发生冲突。

看起来这应该是可行的，但我无法完全理解它。有什么建议吗？

Answer 1

在这种情况下，我要做的是在您的指令中添加“isOpen”属性，并在ng-click调用中切换该值true / false。

在HTML中看起来像这样：

<div ng-click="vm.isOpen = true">I can open the popup inside the custom directive</div>
<my-custom-directive isOpen="vm.isOpen"></my-custom-directive>

在TypeScript Angular指令中调用函数？

1 个答案: