AngularJS使用指令动态添加和删除元素

AngularJS使用指令动态添加和删除元素

我正在解决你的问题。您的问题是指令

new-directive

no具有

isolate

范围。

jsfiddle上的实时示例。

angular.module('app', [])  .controller("mainCtrl", ['$scope', function($scope) {  }])  .directive('newDirective', function($compile) {    return {      restrict: 'E',      replace: true,      scope: {},      template: '<ul>' +        '<li>' +        '<button ng-click="remove()">Remove {{ind}}</button>' +        '</li>' +        '</ul>',      link: function(scope, element, attributes) {        scope.ind = Math.round(Math.random() * 100);        scope.remove = function() {          console.log(scope.ind);          element.remove();        }      }    }  })  .directive('customerForm', function($compile) {    return {      scope: {},      restrict: 'E',      transclude: true,      template: '<div>' +        '<input type="button" value="addd" name="AAA" ng-click="getData()">' +        '</div>',      controller: "mainCtrl",      link: function(scope, element, attrs, mainCtrl) {        scope.getData = function() {          $newDirective = angular.element('<new-directive>');          element.append($newDirective);          $compile($newDirective)(scope);        }      }    };  });<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app">  <customer-form></customer-form></div>