在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代替。