MaterialJSボタンを動的に追加する適切な方法

Question

AngularJS Materialボタン "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：AngularjsでDOMを操作するhttp://jsfiddle.net/odgma1w6/

https://material.angularjs.org/

Answer 1

最良の方法は、ディレクティブを使用することです。

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/