同一指令的 Angular 多个实例，范围不隔离，范围相同

Question

我在页面上多次使用该指令，例如

$scope.stylusright[0] = 330;

var appendHtml = $compile('<directive-history rightstylus="{{stylusright[0]}}"></directive-history>')($scope);

$element.append(appendHtml);

$scope.stylusright[1] = 660;

var appendHtml = $compile('<directive-history rightstylus="{{stylusright[1]}}"></directive-history>')($scope);

$element.append(appendHtml);

我的指令看起来像

angular.module('mymodule').directive('directiveHistory', function ($compile)
{
return {
restrict: 'E',
scope: true,
transclude: true,
templateUrl: 'directive.history.html',
scope: {
rightstylus: "@",
}, 
...

我的问题是，当同一指令多次添加到同一页面时，它们的范围变得相同。当我在第二个指令中更改 $scope.stylusright[1] 时，它也会对所有其他指令进行更改。

Answer 1

您的指令代码看起来没有错误（只是您有重复的作用域键）。

看看这个 Plunker，它与您想要使用隔离范围指令执行的操作类似。

希望有帮助。