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>

问题是只有一个

式

对象在所有元素之间共享。 因此，两个指令的所有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内容

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

1 个答案: