在AngularJS

Question

重复按下按钮一个div我在这里以下的教程：https://fourtonfish.com/blog/2014-01-dynamically-add-directives-in-angularjs-no-jquery/

尝试，当按下一个按钮附加信息核实。我有添加到我的主页按钮，但是当我点击它，我得到：

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

元件是第二个参数，而不是第一个。第一个是指令的$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代替。