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

Question

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

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>

问题是只有一个

style

对象在所有元素之间共享。 因此，两个指令中的所有 css 都将应用于元素，即使它们只使用其中一个指令也是如此(假设页面上的另一个元素使用两个指令)。

如何隔离作用域，以便仅在单个元素的指令之间共享样式对象？

我不想在这里创建困惑的代码。希望它应该只是对范围的简单调整。请不要使用凌乱的 Controller 。

非常感谢您的帮助。

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 (我已经离开 Angular 几个月了)。当您可以获得元素的 id 时，您可以删除整个 attrs 东西