Question

我有一个图表指令，我在其中创建一个Morris.js图。我把这个指令放在我的网站上5次。

我有一个处理所有不同数据的控制器。

如何才能使我的指令足够通用以处理不同的数据？

我把所有东西放在同一范围内。

我的方法是使用data-attribute：

所以我可以决定数据属性我应该使用哪些数据。

<div id="chart" data="income" barchart></div>

我的指令如下：

  angular.module('app')
  .directive('donutchart', function () {
    return {
      link: function(scope, element, attrs) {
        if(attrs.data === "income") var data = scope.income_data;
        new Morris.Donut({element: element[0].id, data: data});
      }
    };
  });

但是，将不同数据处理到同一指令并保持非常通用的方法是什么？ 我想将数据属性作为变量名称，但仍然不是＆＃34;清理＆＃34;。

Answer 1

你必须在你的指令

中添加它

scope: {
    id: '=id',
    data: '=data',
  },

如果你想在你的链接中使用它，它虽然是attrs例如：attrs.id

Answer 2

我认为你可以写这样的东西

app.directive('donutchart', function () {
  return {
    scope: {
      mymodel: "=data",
      id: "@"
    },
    link: function(scope, element, attrs) {
      new Morris.Donut({element: scope.id, data: scope.mymodel});
    }
  };
});

隔离范围中的id：“@”声明意味着您希望将值作为字符串而不是表达式，

将不同的值传递给相同的指令

2 个答案: