javascript - 使用 AngularJs - Angular Material 或 Jquery 显示窗口模板

Question

如何创建一个按钮(类似于来自 Angular Material 的FAB快速拨号)或类似的东西，在单击的按钮旁边显示一个小窗口，该小窗口只有一个文本区域和一个按钮，我想使用Angular Material 最好或 AngularJs 路由或 Jquery。

我一直在尝试使用有 Angular Material 的底片和 FAB 快速拨号，但没有成功。

如果有任何帮助，我将不胜感激。

Answer 1

如果 Angular Material 没有您正在寻找的内置功能(我不相信它有)，您应该自己编写一个指令。我“可能”会编写一个指令，当单击该指令时，会显示同级或子元素。

您可以使用具有非隔离范围的指令将数据从您正在创建的框中传递到应用程序的其余部分。

代码可能大致看起来像这样:

angular.directive('smallInputModalButton', function() {
    scope: {}, // or false, up to you
    controller: function () { $scope.isShown = false; },
    template: '<div ng-hide="isShown"><input></input><button></button></div>',
    link: function( scope, elem, attrs, controller ) {

        elem.on('click', function(e) {
            e.preventDefault();
            scope.isShown = !scope.isShown;
        });
     }
}

确保相对定位具有 smallInputModal 属性的元素，并相对定位 #isShown div，以便您可以轻松地将它们嵌套在一起.

如果你想真正彻底，你可以创建一个充当按钮的指令，它与另一个具有显示/隐藏模式逻辑的指令进行通信。

如果你查看流行的库，包括 ngMaterial，它们会做类似的事情。

对于简单的用例，上面的答案就可以很好地工作。