动态添加 MaterialJS 按钮的正确方法

【问题标题】：Proper way to dynamically add MaterialJS Buttons动态添加 MaterialJS 按钮的正确方法
【发布时间】：2017-10-27 19:52:29
【问题描述】：

我正在尝试将 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：http://jsfiddle.net/odgma1w6/

https://material.angularjs.org/

【问题讨论】：

标签： angularjs material-design

【解决方案1】：

在 Angularjs 中操作 DOM 的最佳方式是使用指令。

首先你需要创建指令：

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/

【讨论】：

那是使用 ng-repeat 这不是我想要做的。我正在尝试将按钮注入跨度。