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

如何創建一個按鈕（類似於角度材質的FAB快速撥號）或類似的東西，在點擊按鈕旁邊顯示一個小窗口，小窗口只有一個文本區域和一個按鈕裏面，我想使用Angular Material或者AngularJs routing或者Jquery。使用AngularJs - Angular Material或Jquery顯示窗口模板

我一直在嘗試使用bottomomsheets和FAB快速撥號從角材料，但沒有成功。

我將不勝感激任何幫助。

來源

2016-05-24 D.B

如果角材料沒有你正在尋找的功能（我不相信它），你應該自己寫一個指令。我會'可能'編寫一個指令，點擊時顯示一個兄弟元素或子元素。

您可以使用帶有非隔離範圍的指令將數據從您正在創建的框傳遞到應用程序的其餘部分。

的代碼可能會看起來大致是這樣的：

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，他們做這樣的事情。

對於簡單的用例，上面的答案將正常工作。

來源

2016-05-24 06:34:27

謝謝nikk，指令是個好主意，它正在工作，我剛剛得到了一個小問題，點擊窗口中的任何按鈕打開模板。你知道我可以如何將觸發事件附加到「鏈接：」只需要按鈕？ –

不確定我的頭頂 - 但我會做的是拋出一個''''調試'''語句到鏈接函數，即'''鏈接函數（範圍，elem，attrs，控制器）{調試器}）一旦你在那裏檢查'elem''元素。你只需要點擊來綁定到按鈕，所以也許代碼會像'''elem.firstChild.on（'click'...'''或類似的東西。讓我知道這是怎麼回事 –

好吧，這很容易，我只是用ng-hide指令將模板包裝到一個容器中，點擊時需要按鈕將值更改爲true或false，到目前爲止，所有工作都正常。。 –

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

回答

相關問題