如何在按钮单击上创建元素？

Question

我想在单击按钮时动态创建一个元素。 是否必须为此使用ng-click或指令？

这是我正在尝试使用jQuery实现的JSFIDDLE ：

HTML：

<button id="myButton">Click Me</button>
<div id="container"></div>

JS：

$("#myButton").on("click", function() {
    $("#container").append('<div class="box"></div>');
});

另外，如果您想要一个angularjs解决方案，这是到目前为止我有的基本JSFIDDLE 。

警告：

• 请避免使用ng-repeat的控制器解决方案。 上面的代码是一个简化的示例。 创建的元素将不会作为列表，因为我将拖动指令附加到它们。

Answer 1

是否必须为此使用ng-click或指令？

要创建新元素，我将使用$ compile 。 我强烈建议仅在指令中执行任何DOM操作。 您可以通过ng-click指令触发附加过程，也可以使用bind这样的方式：

 element.bind("click", function(e){
      // do stuff here
   });

像这样：

 demo.directive("boxCreator", function($compile){   
      return{
        restrict: 'A',
        link: function(scope , element){        
           element.bind("click", function(e){

            var childNode = $compile('<button ng-click="doStuff()" >new button</button>')(scope)
            element.parent().append(childNode);                   
           });

            scope.doStuff = function(){                   
              // do stuff
            }
        }
    }
   });

演示小提琴

Answer 2

http://jsbin.com/cuciyu/2/edit

JS

var app = angular.module('app', []);

app.directive("addDiv", function($compile){   
          return{
            restrict: 'AE',
            link: function(scope , element,attr){        
               element.bind("click", function(e){ 
               var container =   angular.element(document.querySelector("#container"));
               var childNode = $compile('<div class="box">BOX DIV</div>')(container);
               container.append(childNode);

               });
            }
        };
       });

    app.controller('firstCtrl', function($scope){


    });

HTML：

  <body ng-app="app">
  <div ng-controller="firstCtrl">
    <button add-div>Click Me</button>
        <div id="container"></div>
      </div>
</body>