Javascript AngularJS+；Jquery甘特图-多个图表

我正在使用angularJs开发一个web应用程序，我需要显示甘特图。我使用了jquery甘特图插件，当只显示一个图表时，一切正常，但如果我想显示两个或更多图表，即使不是这样，它们似乎都有相同的来源

<chronogramme source="$ctrl.firstSource"></chronogramme>
<chronogramme source="$ctrl.secondSource"></chronogramme>

（$ctrl是我的控制器的别名，用“controllerAs”定义）

例如，当我更新“secondSource”时，第一个图表也会更新，并显示与第二个图表相同的内容

甚至可以有多个图表吗

谢谢

---

更新： 问题一定在这里，因为jquery甘特图的选择器会影响每一个图表，我将对此进行研究（如果它可以帮助其他人，请将其放在这里） “计时程序”指令：

app.directive("chronogramme", function(){
return {
    restrict: 'E',
    replace: true,
            scope: {
                source: '=source',
                minScale: '=?minScale',
                scale: '=?scale',
                onItemClick: '=onItemClick',
                onTitleClick: '=onTitleClick'
            },
    template: '<div class="gantt"></div>',
    link: function(scope, element, attrs){
                if (!scope.minScale) { scope.minScale = 'months'; }
                if (!scope.scale) { scope.scale = 'months'; }
                scope.$watch('source', function(){
                    $(".gantt").gantt({
                        source: scope.source,
                        navigate: "scroll",
                        minScale: scope.minScale,
                        scale: scope.scale,
                        itemsPerPage: 20,
                        waitText: "Chargement...",
                        months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                        dow: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
                        scrollToToday: true,
                        onItemClick: function(data) {
                            scope.onItemClick(data);
                        },
                        onTitleClick: function(data) {
                            scope.onTitleClick(data);
                        }
                    });
      });
    }
};

app.directive（“Chronograme”，function（））{
返回{
限制：'E'，
替换：正确，
范围：{
来源：'=来源'，
最小刻度：'=？最小刻度'，
比例：'=？比例'，
onItemClick:'=onItemClick'，
onTitleClick:'=onTitleClick'
},
模板：“”，
链接：函数（范围、元素、属性）{
如果（！scope.minScale）{scope.minScale='months'；}
如果（！scope.scale）{scope.scale='months'；}
作用域：$watch（'源'，函数（）{
$（“.gantt”）.gantt({
来源：scope.source，
导航：“滚动”，
minScale:scope.minScale，
scale:scope.scale，
项目页码：20，
waitText:“收费……”，
月份：[“詹维尔”、“费维尔”、“火星”、“艾薇儿”、“梅”、“朱因”、“朱伊莱”、“奥特”、“九月”、“十月”、“十一月”、“德尚布雷”]，
道琼斯指数：[“迪”、“鲁”、“马”、“我”、“杰”、“Ve”、“萨”]，
今天：是的，
onItemClick：函数（数据）{
范围：MClick（数据）；
},
onTitleClick：函数（数据）{
scope.onTitleClick（数据）；
}
});
});
}
};

---

}))

使用显然解决了这个问题。您可以在库中检查

gantt

指令的代码。它非常复杂，您不需要花费时间在应用程序中使用jquery版本的库创建一个指令。因此，使用甘特图指令，您可以在同一视图上有多个图表。（当然，它是用独立的作用域创建的）。下面是同一视图中两个图表的示例，它们的数据集不同：

该指令使用类选择器来调用插件：

template: '<div class="gantt"></div>',
link: function(scope, element, attrs){
            if (!scope.minScale) { scope.minScale = 'months'; }
            if (!scope.scale) { scope.scale = 'months'; }
            scope.$watch('source', function(){
                ̶$̶(̶"̶.̶g̶a̶n̶t̶t̶"̶)̶.̶g̶a̶n̶t̶t̶(̶{̶
                element.gantt({

模板：“”，
链接：函数（范围、元素、属性）{
如果（！scope.minScale）{scope.minScale='months'；}
如果（！scope.scale）{scope.scale='months'；}
作用域：$watch（'源'，函数（）{
̶$̶（̶“̶.̶g̶a̶n̶t̶̶）t̶.̶g̶a̶n̶t̶（̶{
元素甘特({

不要在类为

gantt

的所有元素上调用插件，而是在特定于指令的元素上调用它

---

另外，指令

replace

属性也已被弃用。如果该指令与

ng repeat

一起使用，则可能会导致问题。在询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将得到更好的答案。请参阅。混合AngularJS和jQuery可以我想，这不是一个与我的代码相关的技术问题，而是一个更具概念性的问题。然而，如果它能帮助我，我会努力为这个提示做一个感谢，我会看看角甘特尔能否解决这个问题，至少你可以提供链接到P。lugin，

Chronograme

指令的代码。以及控制器中导致错误的代码。哦，我感觉很糟糕，甚至没有检查指令代码…（原以为它嵌入了一些库中-tbh我正在快速学习这个项目，我没有编写所有代码）现在我确实认为问题出在指令代码上，但我真的不知道要更改什么。非常感谢，我将对此进行深入研究谢谢！这是意料之中的！我试图将id attrs添加到作用域中以生成更具体的选择器，但它没有起作用：/感谢您的想法，但整个项目经常使用jqueryo我尽可能多地使用它。而且，现在我看到“Chronograme”指令写得很糟糕，所以更改所有图表将是无关紧要的。但是无论如何，谢谢！