同一指令的两个实例相互覆盖

Question

我正在同一条指令用于工具栏的多个实例。工具栏上的按钮具有切换功能。因此，如果第一次点击“添加”，那么另一次点击“删除”。这是我正在使用的简化指令：

a.directive("trendChartToolbar", function ($templateRequest, $compile) {
return {
    scope: {            
    },
    link: function (scope, elem, attrs) {
        templateSRC = 'templateSRC.html';
        $templateRequest(templateSRC).then(function (html) {                
            var template = angular.element(html);
            $(elem).append(template);
            template = $compile(template)(scope);
            angular.element(elem).on('click', function (event) {
                if (scope.state === undefined)
                    scope.state = true;
                else
                    scope.state = !scope.state;
                service.someMethod(event.target.name, scope);
            });
        });                   
    }
  };
});

这是模板：

<div>
    <img style="cursor:pointer;margin-right:10px" name="deviation"
         src="image.svg" />
</div>

只要指令的一个实例存在，一切就可以正常工作。 scope.state从true变为false并返回。但是，如果存在另一个实例，则当我第二次单击第一个实例时，作用域的状态属性未定义。我的期望是，只要我使用隔离的示波器就可以。有想法吗？

谢谢