Question

我正在尝试自动生成一些样式内容（在加载页面时，以及在不同的API调用之后），因此我创建了一个在我的视图中<head>标记内使用的指令。该指令使用函数自动生成模板，但是我需要能够使用一些简单的条件来添加或不添加一些东西到我的样式（如果值不为null）。如果没有这个条件，我可以在没有使用$ compile但只使用＆＃34; return {template：generate_dynamic_style ...}＆＃34;的情况下使其工作没有任何问题。但是我无法评估此generate_dynamic_style中的范围变量值。

我尝试使用compile将范围变量传递给它。所以这是我的代码：

    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），我得到一个奇怪的＆＃34; undefined＆＃34; ？当我后来尝试（正如你在我的例子中看到的）链接中的相同内容时，我也遇到了同样的问题。我是否使用错误的语法来访问范围的内容？

我真的很困惑并且浪费时间，因为我根本不了解问题所在。

我愿意接受其他替代方案以满足我的需求：能够在我的模板中使用范围变量的null值周围的条件。

修改：这是我做过的一个傻瓜：Plunker example。不幸的是我无法让我的问题再次发生，因为如果我在同一个控制器中拥有所有东西，一切显然都有效。实际上在我的情况下我使用路线。至少这个plunker示例允许我们确认我的代码通常正常工作，我没有语法错误......

非常感谢您提供给我的任何类型的帮助。

Answer 1

我希望我能正确理解你。它似乎对我有用，我得到了未定义的消息并将指令放在主控制器中。如果我理解正确，那么这似乎正如您所期望的那样，see my plunkr。

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

从指令模板的函数

1 个答案: