在指令中單擊按鈕隱藏/顯示div

Question

我正在嘗試編寫一個指令，我在其中提供按鈕，以便當用戶點擊它時，一些內部div將被隱藏。 但是我沒有得到如何隱藏/顯示clicked元素指令的動畫，因為我在頁面上有很多指令。

小提琴示例:: JSFiddle鏈接

HTML ::

 <div class="col-md-7" id="middle_part">Middle<br/>
      <my-dir 
        bgcolor="gray"
        myTitle="Anam" 
        amount="29000"
        myheight="100"
        width="400"
        mycolor="cyan"
        save="saveChanges('custom directive')">template
      </my-dir>
  </div>

腳本::

// add a directive
app.directive("myDir", function() {
  return {
    restrict: "E",
    scope: {
      myTitle: "@",   // by value
      myheight: "@",   // by value
      mywidth: "@",   // by value
      mycolor: "@",   // by value
      bgcolor: "@",   // by value
      amount: "=", // by reference
      save: "&"    // event
    },
    template: 
      "<div><h2>  And This is Title <button ng-init='collapsed=true' ng-model='collapsed' ng-click='collapsed=!collapsed'>Save</button> " +
  "</h2><div  ng-show='collapsed' style='clear:both;'> This is dynamic content which i want to hide/show <br/><br/></div>" +
  "  {{myTitle}}+{{myheight}}:  </div>",
    replace: true,
    transclude: false,
    link: function (scope, element, attrs) {

        // show initial values: by-val members will be undefined
        console.log("background is " +attrs.bgcolor);


        // change element just to show we can
        element.css("background", attrs.bgcolor);
        element.css("color", attrs.mycolor);
        element.css("height", attrs.myheight);
        element.css("width", attrs.mywidth);


        // // log changes to the 'amount' variable
    }
  }
});

如何將hide / show與動畫綁定？

Answer 1

您可以使用ngAnimate模塊。 首先添加依賴項：

var app = angular.module('plunker', ['ngAnimate']);

之后設置動畫只是編寫CSS過渡/動畫的問題。 例如：

.collapsible {
    -webkit-transition: all .6s linear;
    opacity: 1;
    background: #EFF;
    max-height: 150px;
}
.collapsible.ng-hide-add,
.collapsible.ng-hide-remove {
    display: block !important;
}
.collapsible.ng-hide-add-active,
.collapsible.ng-hide-remove-active {
    overflow: hidden;
}
.collapsible.ng-hide {
    opacity: 0;
    max-height: 0;
}

演示： http ： //plnkr.co/edit/2YgEceZkBRbnEVds945？p = preview