创建多个指令的正确方法是什么？
创建多个指令的正确方法是什么？
提问于 2013-12-31 13:09:28
假设我有一个指令，它有一个d3图表，通常可以替换掉一个div：
假设根据用户事件(例如，单击"Add Button")会导致添加指令的新实例(即，如果单击按钮两次，则会添加两个实例，但其内容将以某种方式被模板替换？)以及一个“移除按钮”，它根据“id”移除指令的特定实例：
如果没有angular，我将使用jquery append，它会将包含整个模板的div添加到其中。如何使用angular指令来实现这一点？
注意:通常我只会使用：
$('.button').click(function() {
$('.container-div').append('<mygraphic>Other Dom Elements Involved</mygraphic>')
});尽管我假设在指令中定义了模板，我可以使用：
$('.button').click(function() {
$('.container-div').append('<mygraphic></mygraphic>')
});尽管问题是我如何让我的图片成为指令？(在初始页面加载时，angular会找到这些标记并将其替换为模板。在页面加载完成后，我想创建多个独立的"mygraphic“实例，但是使用指令中定义的模板，是否需要做一些额外的操作或使用其他方法来添加它们？
回答 1
Stack Overflow用户
发布于 2014-01-01 02:23:13
var module = angular.module("app", []);
module.directive("myGraphic", function () {
return {
restrict:"E",
template: "<h1>{{data}}</h1>",
scope:{
data:"="
}
};
});
module.controller("TestCtrl", function ($scope, $http) {
$scope.graphics = [];
$scope.add = function () {
$scope.graphics.push(new Date());
}
$scope.remove = function(index) {
$scope.graphics = $scope.graphics.splice(index,0);
}
});http://jsfiddle.net/dVvW8/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20852051
复制相关文章
相似问题
腾讯云开发者
