使用 AngularJs - Angular Material 或 Jquery 显示 window 模板

Question

如何创建一个按钮（类似于 angular material 的 FAB 快速拨号）或类似的东西来在单击的按钮旁边显示一个小 window，小 window 只有一个文本区域和一个按钮，我想最好使用 Angular Material 或 AngularJs 路由或 Jquery.

我一直在尝试使用 angular material 的 bottomsheets 和 FAB 快速拨号，但没有成功。

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

Answer 1

如果 angular material 没有您正在寻找的内置功能（我不相信它有），您应该自己为它编写一个指令。我会 'probably' 编写一个指令，在单击时显示同级元素或子元素。

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

代码可能大致如下所示：

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 相对放置，以便您可以轻松地将它们彼此相邻嵌套。

如果你想要真正彻底，你可以创建一个充当按钮的指令，它与另一个具有 showing/hiding 模态逻辑的指令通信。

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

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

使用 AngularJs - Angular Material 或 Jquery 显示 window 模板

Using AngularJs - Angular Material or Jquery to display a window template

javascript

jquery

angularjs

angular-material