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
            }
        }
    }
   });

演示 Fiddle

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>

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

2 个答案: