0

以下は、ローカルに保存されている HTML のブロックをスクリプト要素に挿入するために私が書いた簡単なディレクティブです。

使用方法は次のとおりです。

<body>
   <div my-partial="partial1"></div>
</body>

<script id="partial1" type="text/html">
   <div>
      <button ng-click="OK()">OK</button>
   </div>
</script>

コードは私が望むことを行いますが、部分的なテンプレートがディレクティブを使用して要素を置き換えると、そのng-scope上にクラスがあることがわかります。これにより、新しいスコープが作成されたと思われますが、これは私の意図ではありませんでした。HTML を挿入して、既存のスコープの一部にしたかっただけです。

なぜこうなった？

ディレクティブは次のとおりです。

   app.directive("myPartial", ["$compile", function ($compile)
    {
        var def =
        {
            restrict: 'A',
            scope:false,
            compile: function (element, attributes, transclude)
            {
                var tmplID = attributes.myPartial,        //Get templateID
                    markup = $("#" + tmplID).html(),      //Load partial template markup <text node>
                    partial = $("<div>").html(markup);    //Stick markup text into a <div> so it'll become real DOM elements

                partial = partial.contents();             //Don't need that outer <div> anymore

                if (!partial.length) { throw "myPartial: " + tmplID + " not found"; }

                //Replace this element w/ the partial template markup
                element.replaceWith(partial);


                //PostLink
                //---------------------------------------------------------------------
                return function postLink(scope, element, attributes, modelController)
                {
                    //Compile the partial and link it w/ the current scope
                    $compile(partial)(scope);
                }
            }
        };

        return def;
    }]);

ヘルプまたは提案されたコードの改善に感謝します。

4

2 に答える 2

0

問題は投稿リンク機能に関係していると思います。この場合、私は持っているべきではないと思います。

これはうまくいくようです：

 {
        restrict: 'A',  //Attribute
        scope: false,   //Don't create a new scope

        compile: function(element, attributes, transclude)
        {
            //Get partial template
            var partial = $("#" + attributes.asmPartial);

            //Add the partial to the element
            element.html(partial.html());

            //Remove the element leaving only the partial
            element.contents().unwrap();
        }
    }
于 2013-10-06T18:13:08.917 に答える
0

2 番目の質問への回答: コンパイル関数内でスコープにアクセスすることはできません。詳細な理由については、Angular.js リポジトリ Wiki の「ディレクティブについて」を参照してください。値を定期的にスコープにバインドし、必要に応じてリンク機能を使用してスコープを変更します。

于 2013-10-06T09:26:24.920 に答える