Javascript 如何使用angular动态地向控制器附加div标记？

我正在学习angularjs，并将jQuery和angularjs混合使用。我知道这不是正确的方法，但我不知道Angularjs的正确方法是什么

在HTML中，我有一个标签，它只是一个按钮，用于将div标签动态添加到页面上

<div ng-controller="pgCtrl">
    <button id="new-btn" ng-click="newDiv()">Gimme a div!</button>
</div>

给我一杯！

在javascript中，我有以下内容：

app.controller('pgCtrl', function($scope){
    $scope.newDiv = function(){
        // Load an element that uses controller anotherCtrl
        $('<div class="blah" ng-controller="anotherCtrl">' +
            '<button id="another-btn" ng-click="stuff()">-</button>{{stuff}}' +
            '</div>').appendTo('body');
        angular.bootstrap($('.blah'), ['app']);
    };
});

app.controller（'pgCtrl'，函数（$scope）{
$scope.newDiv=函数（）{
//加载使用其他控制器的元素Ctrl
$('' +
“-{{stuff}}”+
''）。附于（'主体'）；
引导（$（'.blah'），['app']）；
};
});

---

我知道这不是Angularjs的“正确”方式。我混合使用了vary basic jQuery，它可以工作，但我没有学到任何东西。使用angular时，请始终首先考虑更新scope对象（模型）。然后，在标记（视图）中有许多

ng

内置指令来处理处理范围对象

事实上，当您从angular开始时，最好不要在页面中包含jQuery。它有助于迫使您远离jQueryDOM操作方法，开始思考模型/控制器/视图

这篇文章对于从jQuery迁移到angular的任何人来说都是必读的：

演示的一个简单入门课程是：

app.controller('pgCtrl', function($scope){
      $scope.items=[];
      $scope.newDiv=function(){
           $scope.items.push( {stuff: 'Some stuff text'}
      }
})

然后在视图中使用

ng repeat

，这样您可以根据需要多次点击按钮，并继续添加

内容

<div ng-repeat="item in items" >
        <div class="blah" ng-controller="anotherCtrl">
            <button id="another-btn" ng-click="stuff()">-</button>{{item.stuff}}
         </div>

</div>

-{{item.stuff}

谢谢，这正是我需要的帮助。你引用的帖子链接也是一个很大的帮助。