我使用指令创建联系表格。最初我创建用于显示客户表单的customerForm指令。在这种形式下,我有一个按钮,当我们单击添加按钮时,称为getData函数,该函数内部使用newDirective显示ul列表。为此,我使用$
compile
api编译html代码。很好,当我们单击“删除”按钮时,它也显示列表值和“删除”按钮,它称为scope.remove()函数。但是它只能删除一个。之后,我无法删除任何元素(即按钮)。我不知道为什么会这样。请帮我。jsfiddle
<div class="container">
<customer-form></customer-form>
</div>
angular.module('sanshaApp', [])
.directive('newDirective', function ( $compile ){
return {
restrict: 'E',
template:
'<ul>' +
'<li>{{somoe value here}}' +
'<button ng-click="remove()">Remove</button>' +
'</li>'+
'</ul>',
link: function (scope, element, attributes) {
//called when click on Remove button
scope.remove = function () {
element.remove();
}
}
}
})
.directive('customerForm', function($compile) {
return {
scope: {
},
restrict: 'E',
transclude: true,
templateUrl: "../../views/customer-form.html",
controller: "mainCtrl",
link: function(scope, element, attrs, mainCtrl) {
scope.getData = function() {
//create new element new-directive
$newDirective = angular.element('<new-directive>');
element.append($newDirective);
//compile html DOM
$compile( $newDirective )(scope);
}
}
}
})
.controller("mainCtrl", ['$scope', function($scope) {
}])
<div class="form-group row">
<label for="name" class="col-lg-2 form-control-label">Customer name</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="name.aa" placeholder="customer name">
</div>
<label for="email" class="col-lg-2 form-control-label">Email address</label>
<div class="col-lg-4">
<input type="email" class="form-control" ng-model="name.email" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-lg-4">
<button class="btn btn-default" value="add" ng-click="getData()">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
我正在解决你的问题。您的问题是指令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>
问题内容: 我正在做的事情非常精简,可以解决问题。 我有一个简单的。每当您单击一个元素时,它都会添加另一个元素。但是,需要先对其进行编译才能正确呈现。 我的研究使我走向了。但是所有示例都使用了一个复杂的结构,我真的不知道如何在这里应用它。 小提琴在这里:http : //jsfiddle.net/paulocoelho/fBjbP/1/ JS在这里: Josh David Miller的解决方案:
问题内容: 我正在尝试添加/删除表行。 这是我的代码: HTML表格 JavaScript 现在,如您所见,在我的表格中,我有文本字段和按钮。我想要的是: 仅重复行的结构。我现在无法执行此操作,因为innerHTM仅接收文本。如何插入文本框或标签? 文本字段的ID也应该不同,因为稍后我将检索这些值以将其放入数据库中。 我想放置一个函数以增加POI的数量 有人可以帮我吗? 问题答案: 您可以仅克隆具
问题内容: 我有这样的设置: 控制器广播事件 指令侦听,然后通过append将其写入DOM,并以此创建指定指令的新元素。 IE浏览器: Angular从未调用过指令 当我检查DOM(并调试)时,我看到Controller 和指令正在执行其工作,并且有新的元素。 什么不见了?动态创建这些元素后需要做什么来触发指令调用? 问题答案: 请参阅。您可以类似于以下方式使用此服务: 这将执行新元素的编译和
问题内容: 我正在尝试工作如何使用ngClick添加类。我已经上传了我的代码到plunker 这里点击。查看角度文档,我不知道应该怎么做。以下是我的代码片段。有人可以指引我正确的方向 控制者 问题答案: 您只需要将变量绑定到指令“ ng-class”,然后从控制器进行更改即可。这是如何执行此操作的示例: 这是在jsFiddle上工作的示例
问题内容: 当前的官方文档仅显示如何动态 更改 标签 内 的组件。 我想实现的是,让我们说我有3个部分组成:,,并具有以下选择: 再有6个按钮,这将增加或删除每个组件:,,和 当我单击时,该页面将添加到呈现它的页面中,因此该页面将包含: 然后,如果我单击两次,该页面现在将包含: 如果单击,该页面现在将包含所有这些组件: 可以在Angular中实现吗?请注意,这不是我要寻找的解决方案,因为它仅允许向
问题内容: 我花了一段时间试图找到一个优雅的解决方案,而我却找到了一个“可行”的解决方案,它感觉不是最简单或正确的做事方式。 所以,我的问题是…如何动态加载指令!在某些情况下,以下是我希望我能摆脱它的方式!除了模板加载之外,我没有包含路由或其他任何内容,而是为下面的控制器分配了ng- controller。 app.js template.html 任何人都可以提供的建议将不胜感激,如果我做任何明