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

回答您的第二个问题： 您无法访问 compile 函数内的范围。有关详细原因，请阅读 Angular.js 存储库 Wiki 中的“理解指令”。只需将值定期绑定到您的范围，并在需要时使用链接功能修改范围。

于 2013-10-06T09:26:24.920 回答
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 回答