Я пытаюсь создать автоматически некоторые вещи стиля (при загрузке страницы и после различных вызовов 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 позволяет нам получить подтверждение того, что мой код обычно работает, у меня нет синтаксических ошибок...
Большое вам спасибо за любую помощь, которую вы мне должны предоставить.
Надеюсь, я правильно тебя понимаю. Кажется, это работает для меня, я получил неопределенное сообщение и поставил директиву так, чтобы он находился внутри основного контроллера. Если я правильно понимаю, то это, похоже, работает так, как вы ожидаете, см. Мой plunkr.
<body ng-controller="MainCtrl">
<dynamicstyle></dynamicstyle>
<p>Hello {{name}}!</p>
</body>