Fab Speed Dial md-fab-actions不使用ng-repeat和django {％verbatim％}

Question

我正在尝试使用ng-repeat来自我的控制器的图像列表来显示为导致操作按钮始终打开或展开的md-fab-actions，意味着鼠标单击无效。 html的注释代码在没有ng-repeat的情况下工作正常，意味着在鼠标点击时切换良好。

这是角度代码

 (function() {
  'use strict';

  angular.module('fabButtomApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('fabButtomAppController', function($scope, $mdDialog, $timeout) {
      var self = this;

      self.hidden = false;
      self.isOpen = false;
      self.hover = false;

      // On opening, add a delayed property which shows tooltips after the speed dial has opened
      // so that they have the proper position; if closing, immediately hide the tooltips
      $scope.$watch('fabButtonQuick.isOpen', function(isOpen) {
        if (isOpen) {
          $timeout(function() {
            $scope.tooltipVisible = self.isOpen;
          }, 600);
        } else {
          $scope.tooltipVisible = self.isOpen;
        }
      });

      self.items = [
        { name: "Share Blog", icon: 'static/scrumboard/sss/share.svg', direction: "top", class:"md-fab md-raised md-mini share-blog"},
        { name: "Comment", icon: 'static/scrumboard/sss/comment.svg', direction: "top", class:"md-fab md-raised md-mini comment-blog" },
        { name: "Create Blog", icon: 'static/scrumboard/sss/add.svg', direction: "top", class:"md-fab md-raised md-mini create-blog"}
      ];

      self.openDialog = function($event, item) {
        // Show the dialog
        $mdDialog.show({
          clickOutsideToClose: true,
          controller: function($mdDialog) {
            // Save the clicked item
            this.item = item;

            // Setup some handlers
            this.close = function() {
              $mdDialog.cancel();
            };
            this.submit = function() {
              $mdDialog.hide();
            };
          },
          controllerAs: 'dialog',
          templateUrl: 'dialog.html',
          targetEvent: $event
        });
      };
    });
})();

这是html代码

    {% load staticfiles %}

    <div ng-controller="fabButtomAppController as fabButtonQuick" layout="column" class="fabSpeedDialdemoBasicUsage">
        <md-content class="md-padding" layout="column">
            <p>
                You may supply a direction of <code>left</code>, <code>up</code>, <code>down</code>, or
                <code>right</code> through the <code>md-direction</code> attribute.
            </p>

            <div class="lock-size" layout="row" layout-align="center center" ng-cloak>
    <!-- 
                <md-fab-speed-dial class="md-fab-bottom-right md-scale" md-open="false" md-direction="left" ng-class="md-scale">
                    <md-fab-trigger>
                        <md-button aria-label="menu" class="menu-fab-button-icon md-fab md-warn">
                            <md-tooltip>Blog Action</md-tooltip>
                            <md-icon md-svg-src="{% static "scrumboard/sss/menu.svg" %}"></md-icon>
                        </md-button>
                    </md-fab-trigger>

                    <md-fab-actions>
                        <md-button aria-label="plus" class="md-fab md-raised md-mini share-blog">
                            <md-tooltip direction="up" md-visible="tooltipVisible" md-autohide="false">Share</md-tooltip>
                            <md-icon md-svg-src="{% static "scrumboard/sss/share.svg" %}"></md-icon>
                        </md-button>
                        <md-button aria-label="facebook" class="md-fab md-raised md-mini comment-blog">
                            <md-tooltip direction="up" md-visible="sntooltipVisible" md-autohide="false">Comment</md-tooltip>
                            <md-icon md-svg-src="{% static "scrumboard/sss/comment.svg" %}"></md-icon>
                        </md-button>
                        <md-button aria-label="Google hangout" class="md-fab md-raised md-mini create-blog">
                            <md-tooltip direction="up" md-visible="tooltipVisible" md-autohide="false">Crete New Blog</md-tooltip>
                            <md-icon md-svg-src="{% static "scrumboard/sss/add.svg" %}"></md-icon>
                        </md-button>
                    </md-fab-actions>
                </md-fab-speed-dial> 

-->
                <md-fab-speed-dial class="md-fab-bottom-right md-scale" md-open="false" md-direction="left"   ng-class="md-scale}">
                    <md-fab-trigger>
                        <md-button aria-label="menu" class="md-fab md-warn">
                            <md-tooltip md-direction="top" md-visible="tooltipVisible">Menu</md-tooltip>
                            <md-icon md-svg-src="{% static "scrumboard/sss/menu.svg" %}" aria-label="menu"></md-icon>
                        </md-button>
                    </md-fab-trigger>

                    <md-fab-actions>
                        {% verbatim %}
                        <div ng-repeat="item in fabButtonQuick.items">
                            <md-button aria-label="{{item.name}}" class="{{item.class}}" ng-click="fabButtonQuick.openDialog($event, item)">
                                <md-tooltip md-direction="{{item.direction}}" md-visible="tooltipVisible" md-autohide="false">
                                    {{item.name}}
                                </md-tooltip>
                                <md-icon md-svg-src="{{(item.icon)}}" aria-label="{{item.name}}"></md-icon>
                            </md-button>
                        </div>
                        {% endverbatim %}
                    </md-fab-actions>
                </md-fab-speed-dial>
            </div>
        </md-content>
    </div>

这是css

.fabSpeedDialdemoBasicUsage.md-fab-bottom-right {
  top: auto;
  right: 20px;
  bottom: 20px;
  left: auto;
  position: absolute;
  /*background: blue;*/
}

/*button.md-fab.md-warn.menu-fab-button-icon{
   background-color: black !important;
}*/
.fabSpeedDialdemoBasicUsage.md-button{
  background-color: blue !important;
}
.fabSpeedDialdemoBasicUsage.create-blog{
  background-color: green !important;
}
.fabSpeedDialdemoBasicUsage.comment-blog{
  background-color: red !important;
}
.fabSpeedDialdemoBasicUsage.share-blog{
  background-color: #3a4d5a !important;
}

Out：应该在鼠标悬停或点击时使用ng-repeat和verbatim切换： image