Доступ к области действия из функции шаблона директивы

0

Я пытаюсь создать автоматически некоторые вещи стиля (при загрузке страницы и после различных вызовов API), поэтому я создал директиву, используемую в разметке <head> в моем представлении. Директива использует функцию для автоматического создания шаблона, тем не менее мне нужно иметь возможность использовать некоторые простые условия для добавления или отсутствия некоторых вещей в мой стиль (если значение не равно нулю). Без этого условия я мог бы заставить его работать без каких-либо проблем, не используя компиляцию $, но используя только "return {template: generate_dynamic_style...}". Но я не смог оценить значения переменных области внутри этого generate_dynamic_style.

Я попытался передать переменные области с компиляцией. Итак, вот мой код:

    app.directive("dynamicstyle", function($compile) {
        var generate_dynamic_style = function(scope) {
            console.log('why scope works and I can see design Object inside :');
            console.log(scope);
            console.log('but scope.design doesnt work !!???');
            console.log(scope.design);
            var html_result = '<style type="text/css">'; // start style
            if (scope.design.layout_bg_image !== null) {
                html_result += 'html { color: {{design.layout_text_color}}; font-size: 12pt; text-align: {{design.layout_text_alignment}}; background: {{design.layout_bg_color}} url({{design.layout_bg_image}}) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } ';
            }
            html_result += 'body { color: {{design.layout_text_color}}; font-size: 12pt; text-align: {{design.layout_text_alignment}}; } ';
            html_result += '</style>'; // end style
            return html_result;
        };
        return {
            restrict: 'E',
            replace: true,
            link: function(scope, element, attrs) {
                // this log works
                console.log(scope);
                // this log doesn't work neither
                console.log(scope.design);
                var el = $compile(generate_dynamic_style(scope))(scope);
                element.replaceWith(el);
            }
        };
    });

У вас есть идея, почему я могу получить доступ к области (в Firefox JS-консоли при проверке элемента) и разработать то, что находится внутри, я могу правильно увидеть объект дизайна и некоторые другие пары ключ-значение внутри него. Но для второго console.log(scope.design) я получаю странное "неопределенное"? Когда я попробовал потом (как вы можете видеть в моем примере) те же самые вещи в ссылке, у меня была такая же проблема. Использую ли я неправильный синтаксис для доступа к содержимому области?

Я действительно смущен и теряю время, поскольку я вообще не понимаю, откуда эта проблема.

Я открыт для других альтернатив, соответствующих моим потребностям: чтобы иметь возможность использовать условия вокруг нулевого значения переменных сферы в моем шаблоне.

Изменить: вот плункер, который я сделал: пример Плункера. К сожалению, я не смог повторить свою проблему, потому что все работает, если у меня все в одном контроллере. На самом деле в моем случае я использую маршруты. По крайней мере, этот пример plunker позволяет нам получить подтверждение того, что мой код обычно работает, у меня нет синтаксических ошибок...

Большое вам спасибо за любую помощь, которую вы мне должны предоставить.

  • 0
    У вас есть пример с plunkr? scope.design также регистрируется на консоли в функции link, что может сбивать с толку.
  • 0
    Спасибо, я только что создал пример плунжера, который вы можете найти в моем отредактированном вопросе. Я также немного изменил свой код, чтобы объяснить, почему я пытался войти в консоль из обоих мест. Кстати, это работает для обоих в поршень.
Теги:
scope
templates
angularjs-directive

1 ответ

0

Надеюсь, я правильно тебя понимаю. Кажется, это работает для меня, я получил неопределенное сообщение и поставил директиву так, чтобы он находился внутри основного контроллера. Если я правильно понимаю, то это, похоже, работает так, как вы ожидаете, см. Мой plunkr.

<body ng-controller="MainCtrl">
   <dynamicstyle></dynamicstyle>
   <p>Hello {{name}}!</p>
</body>

Ещё вопросы

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