将工厂/服务对象隔离到单个元素的指令

Question

我有一个由2个属性指令（名为centerPage和keepleft）共享的工厂服务。有多个元素可以使用这些指令中的一个或两个。这是代码，然后我会解释我遇到的问题。

app.factory("style", function(){ 
    return{ 
     style: {} 
    } 
}); 

app.directive("centerPage", ['style', function (style) { 
    return function (scope, element, attrs) { 
     var winW = window.innerWidth; 
     var winH = window.innerHeight; 

     var boxW = 370; 
     var boxH = 385; 

     scope.style = style; 
     scope.style.left = (winW/2) - (boxW/2); 
     scope.style.top = (winH/2) - (boxH/2); 
    } 
}]); 

app.directive("keepleft", ['style', function (style) { 
    return function (scope, element, attrs) { 
     scope.style = style; 
     scope.style.cursor = 'default'; 
     scope.style.transform = 'translateX(-60%)'; 
    } 
}]); 

<started-box center-page keepleft></started-box> 

<action-box center-page></action-box> 

的问题是，只有一个

风格

对象被所有元素之间共享。 因此，即使只使用指令中的1个（假设页面上的另一个元素使用两个指令），来自两个指令的所有css都将应用于元素。

如何隔离范围以便样式对象仅在单个元素的指令中共享？

我不想在这里创建乱码。它应该只是对范围的简单调整。请没有凌乱的控制器。

非常感谢您的帮助。

Answer 1

所以这里的问题是因为共享对象。您可以修改您的工厂以基于名称返回新对象。

app.factory("style", function(){ 
    var _cache = {}; 
    return function(name) { 
    if (!_cache[name]) { 
     _cache[name] = {}; 
    } 
    return _cache[name]; 
    }; 
}); 

那么你的指令可以做到这一点

scope.style = style(attrs.centerPage); 
scope.style = style(attrs.keepleft); 

和HTML

<started-box center-page="group1" keepleft="group1"></started-box> 
<action-box center-page="group2"></action-box> 

P/S：我想你也可以更动element，IIRC每个element都是独特的，具有某种id，我只是不记得什么，以及如何得到这个id（我已经远离角度几个月）。当你可以得到id的元素时，你可以放弃整个attrs的东西