Изолировать фабричный / сервисный объект от директив отдельного элемента

0

У меня есть заводская служба, которая разделяется двумя директивами атрибутов (с именем 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 из обеих директив применяются к элементам, даже если они используют только одну из директив (при условии, что другой элемент на странице использует обе директивы).

Как я могу выделить область, чтобы объект стиля делился только между директивами отдельного элемента?

Здесь я не хочу создавать беспорядочный код. Надеемся, что это просто простая настройка. Никаких беспорядочных контроллеров, пожалуйста.

Большое спасибо за помощь.

Теги:

1 ответ

0

Таким образом, проблема здесь связана с общим объектом. Вы можете изменить свой завод, чтобы вернуть новый объект на основе имени.

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

Поделиться
  • 0
    Я потратил много времени, балуясь с этим ответом, но, к сожалению, он, похоже, не работает. Это также не проблема синтаксиса. Это что-то более фундаментальное в прицеле, но я весь день бьюсь головой об стену, пытаясь понять это :(
  • 0
    Он правильно устанавливает стиль, однако ng-style = "$ parent.style", который у меня есть в шаблоне элемента, похоже, все еще использует обе директивы. Я думаю, что это проблема сейчас.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню