正確的方式來動態添加MaterialJS按鈕

Question

我想動態地添加AngularJS材質按鈕，「md-button」，到頁面上的某些元素。我試過使用jQuery.append選項，但按鈕從不呈現，但文本出現。

$scope.toggleChecked = function (item) { 
     $("#checkedItems").append('<md-button class="md-raised md-primary">'+item+'</md-button>'); 
     var index = $scope.checked.indexOf(item); 
     if (index == -1) { 
      $scope.checked.push(item); 
     } else { 
      $scope.checked.splice(index, 1); 
     } 
    }; 

處理向DIV或SPAN添加新按鈕的最佳方法是什麼？

Plunker：http://jsfiddle.net/odgma1w6/

https://material.angularjs.org/

Answer 1

操作DOM中Angularjs最好的辦法是使用指令。

首先，你需要創建指令：

angular.module('home').directive('addButtonDirective', ['$log', addButtonDirective]); 

function addButtonDirective($log) { 
    return { 
      restrict: 'A', 
      link: function ($scope, element, attributes) { 
       var el = $(element); 

       el.append('<md-button class="md-raised md-primary md-button md-default-theme">test</md-button>'); 
      } 
     } 
}; 

並將其添加到您的HTML這樣的：

<md-list-item ng-repeat="fruit in fruits | filter:searchText" add-button-directive> 

我已經更新了你的jsfiddle，檢查了這一點：http://jsfiddle.net/odgma1w6/1/