Angular JS의 확장 버튼 개발

Question

Angular JS에서 대시 보드를 개발하고 입력을 찾고 있습니다. 아래 스크린 샷에 표시된 참조가 있습니다. 확장하고 자세히보기를 표시하는 단추를 강조 표시했습니다.

비슷한 것을 개발하고 싶습니다. Angular JS에서이 버튼이 호출 한 기능은 무엇입니까? 모든 포인터 또는 문서는 대단히 감사하겠습니다. 모든 버튼이나 UI 관련 목록도 매우 유용 할 것입니다.

Answer 1

내가 만들고 확인하기 위해 지시어를 사용하여 조금 같은 일

http://plnkr.co/edit/Itm6gdFbi6P7J1LvdXj7?p=preview

지시어

// Declare the main module 
var myApp = angular.module('myApp', []); 

angular.module('myApp').directive('dir.showhide', function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     scope: { dswitch: "=", 
       dshowmessage: '@' , // the message displayed in the button 
       dhidemessage :'@', // the message displayed in the button 
       dshowmessagehover: '@' , //the message displayed on hover the button 
       dhidemessagehover :'@'},//the message displayed on hover the button 
     plain : true , 
     template: '<div> <button class="btn btn-default btn-xs" type="button" ng-click="dswitch=true" ng-hide="dswitch" tooltip-popup-delay="500" '+ 
      'tooltip-placement="right" uib-tooltip="{{dshowmessagehover}}"> <span class="glyphicon glyphicon-eye-open">{{dshowmessage}}</span> </button>'+ 
      ' <button class="btn btn-default btn-xs" type="button" ng-click="dswitch=false" ng-hide="!dswitch" tooltip-popup-delay="500" tooltip-placement="right" '+ 
      ' uib-tooltip="{{dhidemessagehover}}"> <span class="glyphicon glyphicon-eye-close">{{dhidemessage}}</span> </button> </div>', 
     controller: function ($scope) { 
     } 
    } 
}); 

myApp.controller('Ctrl1', ['$scope', function($scope) { 
    $scope.showdata = false ; 
    $scope.dataToShow = "I am looking to develop a dashboard in Angular JS and looking for inputs,I have a reference as shown in screen shot below ,I highlighted the buttons that expand and show the detail view,I want to develop something similar to that,what this button called in ANGULAR JS?any pointers or docs are very much appreciated .A list of all buttons or UI related things would be very helpful"; 

    $scope.showdata2 = false ; 
    $scope.dataToShow2 = "I am looking to develop a dashboard in Angular JS and looking for inputs,I have a reference as shown in screen shot below ,I highlighted the buttons that expand and show the detail view,I want to develop something similar to that,what this button called in ANGULAR JS?any pointers or docs are very much appreciated .A list of all buttons or UI related things would be very helpful"; 
}]); 

그리고 html 코드 :

 <dir.showhide dswitch="showdata" dshowmessage="hide" dshowmessagehover="Hide the data" dhidemessage="show" dhidemessagehover="Show the data" ></dir.showhide> 

    <div ng-hide="showdata"> 
     {{dataToShow}} 
    </div> 

물론 맞춤화해야합니다.