この記事では、AngularJSを使用して、小さなボタンプロンプトを単純に実装しています。ボタンはクリック後に色が変更されます。 jquery.jsおよびangular.jsをHTMLファイルに導入する必要があることに注意してください。
ランニングスクリーンショット：
ボタンをクリックすると、ボタンのスタイルが変更されます。
CSSコード：
<style type = "text/css"> *{margin：0px; padding：0px;} .bucselectedbutton {width：100px; line-height：30px; text-align：center; position：relative;} .bucselected {border：border：1px solid rgb（195,195,195）; pointer：＃cul：＃000; 6PX;バックグラウンドカラー：RGB（255,255,255）;} .bucselectedHover {border：1px solid rgb（74,201,255）; color：rgb（74,201,255）; .bucselectedHover .tip {color：rgb（0,0,0）; background-color：rgb（255,255,255）;} </style>HTMLコード：
<div ng-controller = "buctipcontroller"> <！ - directive-> <buc-button id = "numbertype" my-title = "button" tip-title = "これはプロンプトです" style = "" style = "
JSコード：
<script type = "text/javascript"> var app = angular.module（ "tip"、[]）; app.controller（ "buctipcontroller"、function（）{}）。テンプレート： "<button class = 'bucselectedbutton bucselected' ng-click = 'clicked（）' ng-mouseover = 'mouseover（）' ng-mouseout = 'mouseout（）'> {{mytitle}}/ <div style = 'border：1px solid #dcdcdc; border-radius：6px; width：auto; height：20px; line-height：20px; position：absolute：-40px; padding：5px; nowrap; background-color; style = 'position：absolute; top：25px; left：10px; background-color：#fafafa; border：1px solid #dcdcdc; width：10px; height：10px; transform：rotate（45deg）; border-left：none; border top：none scope.mouseover = function（ "。tip"）マウスをボタンに移動し、先端が表示され、マウスが移動すると、先端が消えます。 CSS3属性を使用して、先端の小さな三角形を実装しました。
要約します
上記は、この記事のコンテンツ全体です。 Angularjsを学ぶことは誰にとっても役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとってください。