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

元素是第二个参数，而不是第一个参数。第一个是指令的Person { int id; string Name; string address; int age; } Employee { int id; int person_id; Person person; double salary;对象。

你可能会对angular的依赖注入感到困惑，但是指令的$scope函数不能用于依赖注入。

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

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); }); }); }函数is deprecated，因此您应该使用bind。

在AngularJS中按下按钮按下div

1 个答案: