Question

如何创建一个按钮（类似FAB快速拨号从角度材料）或类似的东西显示按钮旁边的小窗口点击，小窗口只有一个文本区域和一个按钮里面，我想用Angular Material最好是AngularJs routing或Jquery。

我一直在尝试使用有弹性材料的底部表格和FAB快速拨号，但没有成功。

我将不胜感激。

Answer 1

如果角度材料没有你想要内置的功能（我不相信它），你应该自己编写一个指令。我'可能'会写一个指令，当点击它时，会显示一个兄弟元素或子元素。

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

代码可能看起来像大致这样的东西：

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，他们会做那种事情。

对于简单的用例，上面的答案可以正常工作。

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

1 个答案: