在 AngularJS 中重复按下按钮 div

Question

我正在学习这里的教程：https://fourtonfish.com/blog/2014-01-dynamically-add-directives-in-angularjs-no-jquery/

尝试在按下按钮时将信息附加到 div。我已将该按钮添加到我的主页，但是当我单击它时，我收到：

angular.js:14324 TypeError: element.bind is not a function

我希望得到一些关于如何纠正此问题的建议，如果有的话，甚至可能是更好的方法。我觉得使用 element.bind 是一种 jquery 方法，使用 Angular?

可能有更好的方法

main.html

<div id ="fullForm" ng-controller="MainCtrl" >                
    <button-add></button-add>
    <div id="test">test</div>
</div>

main.js

'use strict';

/**
 * @ngdoc function
 * @name jsongeneratorApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the jsongeneratorApp
 */
angular.module('jsongeneratorApp')
  .controller('MainCtrl', function ($scope) {

  .directive('buttonAdd',function(){
    return{
    restrict:'E',
    templateUrl:'scripts/directives/addbutton.html'
  }
})

.directive('addfields',function($compile){
  console.log("directive called.");
  return function(element,attrs){
    element.bind("click",function(){
      angular.element(document.getElementById('test')).append($compile("<div>Test</div>"))
    })
  }
})

addbutton.html

<div class="row rowmargin">
  <div class="col-sm-9">
  </div>
  <div class="col-sm-3">
    <button addfields class="btn"> Add New Variable</button>

  </div>
</div>

Answer 1

Element是第二个参数，不是第一个。第一个是指令的 $scope 对象。

您可能对 angular 的依赖注入感到困惑，但指令的 link 功能不适用于依赖注入。

如果您在签名中添加范围参数，它将起作用：

// You missed the first parameter 'scope'
return function(scope, element, attrs){
    element.on("click",function(){
        $compile("<div>Test</div>")(scope, function(compiled){
            // callback
           angular.element(document.getElementById('test')).append(compiled);
        });
    });
}

另请注意 bind 函数 is deprecated，因此您应该使用 on 代替。

在 AngularJS 中重复按下按钮 div

Repeating a div on button press in AngularJS

angularjs

ng-repeat