如何附加包含 md-checkbox 和 md-icon 的 html 标签？

Question

我正在使用 angular material 和 angular js，并且我试图在从视图调用函数时附加一个新的 html div。

这是我的观点：

    <div id = "main_row" ng-click="defCtrl.submit()">
    </div>

这就是我在控制器中尝试做的事情：

    self.submit = function()
    {
    $('#main_row').append("<div>
    <md-card layout='row'>
      <md-checkbox flex='80'>                
          Hello 
      </md-checkbox>
     <md-button class='md-icon-button' 
     aria-label='close'> 
       <md-icon  style='fill:red;height: 15px' md-svg-icon=
         'notes/static/img/cancel30.svg'>
       </md-icon>
     </md-button></md-card></div>");
    };

md-card 部分正在正确显示。但是 md-checkbox 和 md-icon 无法加载。请帮忙解决这个问题。

Answer 1

通常建议不要在控制器中操作 dom，但可以做到。这应该接近你想要的

<div id = "main_row" ng-click="submit(evt)"></div>

angular.module('whatever').controller('Ctrl', ['$scope', '$compile', function($scope, $compile){
  $scope.submit = function(evt){
    angular.element(evt.currentTarget).append($compile(
      "<div>
        <md-card layout='row'>
          <md-checkbox flex='80'>                
            Hello 
        </md-checkbox>
        <md-button class='md-icon-button' aria-label='close'> 
        <md-icon style='fill:red;height: 15px' md-svg-icon='notes/static/img/cancel30.svg'></md-icon>
      </md-button></md-card></div>"
    )($scope));
  };
}]);

Answer 2

我宁愿建议您使用 ng-repeat 指令而不是 jQuery 解决方案。

为什么要在 DOM 中加入 jQuery，而您可以在 angular 中自然地做到这一点？毕竟涉及到特殊的md-标签

喜欢：

<div id = "main_row" ng-click="addHelloCard()">
</div>

<div>
  <md-card layout="row" ng-repeat="card in helloCards">

    <md-checkbox flex="80">
      Hello {{card}}
    </md-checkbox>

    <md-button class="md-icon-button" aria-label="close"> 
      <md-icon  style="fill:red;height: 15px" md-svg-icon="notes/static/img/cancel30.svg">
      </md-icon>
    </md-button>

  </md-card>
</div>

在控制器中时：

$scope.helloCards=[];
$scope.addHelloCard = function() {
  $scope.helloCards.push("Perhaps an object containing information...");
}

如何附加包含 md-checkbox 和 md-icon 的 html 标签？

How to append an html tag containing md-checkbox and md-icon?

html

javascript

jquery

angularjs

angular-material