Question

假设我的指令有一个d3图表，通常会替换div：

假设依赖于用户事件（即单击“添加按钮”）会导致添加指令的新实例（即，如果按钮被单击两次，则会添加两个实例，但其内容将是以某种方式替换为模板？）和“删除按钮”，根据“id”删除指令的特定实例：

没有角度我会使用jquery append将div与整个模板附加到其中。如何使用角度指令实现这一目标？

注意：通常我会使用：

$('.button').click(function() {
   $('.container-div').append('<mygraphic>Other Dom Elements Involved</mygraphic>')
});

虽然我假设在指令中定义模板我可以使用：

$('.button').click(function() {
   $('.container-div').append('<mygraphic></mygraphic>')
});

虽然问题是如何让mygraphic成为指令？（在初始页面加载时，angular找到这些标签并用模板替换它们。页面加载完毕后我想创建多个独立的“mygraphic”实例，但是使用指令中定义的模板，还有一些额外的东西吗？需要做什么或一些替代方法来添加它们？

Answer 1

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/

创建多个指令的正确方法是什么？

1 个答案: