4

条件付きでテンプレートを作成しようとしています。いくつかのdivとspanを持つk2pluginディレクティブを取得しました。pluginui属性に従って、テンプレートの最後に別のディレクティブを挿入したいと思います。次の私のコードは、pluginui以外のすべてを補間します。たとえば、最後のdivは次のようになります。

<div {{pluginui}} width='300' height='420'></div>

{{pluginui}}はリテラルですが、他のディレクティブをトリガーするために補間する必要があります。面白いことに、同じ行の別の場所（たとえば、タグの間）に{{pluginui}}を配置すると、補間されます。

何が間違っているのですか？

app.directive("k2plugin", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating plugin");

                    // this won't work immediatley. attribute pluginname will be undefined as soon as this is called.
                    scope.pluginname = "Loading...";
                    scope.pluginid = null;

                    // observe changes to interpolated attributes

                            // [...] observe name, id, width, height

                    attrs.$observe('pluginui', function(value) {
                        console.log('pluginui has changed value to ' + value);
                        scope.pluginui = attrs.pluginui + "viewport";
                    });

                },
                template: "<div>\
                           <div>\
                           <span>{{pluginname}}</span>\
                           <span ng-click=\"resize(pluginid)\">_</span> <span ng-click=\"remove(pluginid)\">X</span>\
                           </div>\
                           <div {{pluginui}} width='{{pluginwidth}}' height='{{pluginheight}}'></div>\
                           </div>",
                replace: true,
            };
        });

        app.directive("canvasviewport", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating canvas viewport");
                },
                template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",
                replace: true
            };
        });

        app.directive("divviewport", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating div viewport");
                },
                template: "<div style=\"width='{{pluginwidth}}' height='{{pluginheight}}'\"></div>",
                replace: true
            };
        });

        app.directive("autoviewport", function () {
            return {
                restrict: "A",
                scope: true,
                link: function (scope, elements, attrs) {
                    console.log ("creating auto viewport");
                },
                template: "<canvas width='{{pluginwidth}}' height='{{pluginheight}}'></canvas>",
                replace: true
            };
        });
4

1 に答える 1

7

Angular が何かをディレクティブ名に補間するとは思いません。{{}} は (自動的に) $watch を設定します。$watch が変更に気付くと、ビューが更新されますが、$compile は呼び出されません。これは、ここで発生する必要があると思います。

したがって、ディレクティブのリンク関数で HTML/テンプレートを生成してから $compile してみます。何かのようなもの：

scope.$watch('pluginui', function(newValue) {
   var jqLiteWrappedElement = angular.element('<div ' + newValue + ' width=...');
   element.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
})

$compileディレクティブに注入することを忘れないでください。

于 2013-03-18T19:52:43.367 に答える