Question

我正在处理角度材质和角度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解决方案。

为什么在jQuery中插入DOM，当你可以在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标签？

2 个答案: