Question

我尝试使用尽可能少的javascript创建Angular Directive菜单（我使用angular，以便可以在app指定的应用基础上在app上指定配置文件）。为了创建菜单，我有一个xslt将xml文件翻译成html页面。当我在浏览器中查看xml时，它会根据我的需要进行样式设置。仅CSS就足以提供我想要的功能。当我引用这个html页面作为angularURL的一个angularURL时，它没有加载说：指令的模板＆＃39; siteMapMenu＆＃39;必须只有一个根元素。

当然消息是正确的，但删除节点不是xslt处理中的一个选项，对吗？

示例xml：

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet  type="text/xsl" href="Views/Shared/SiteMapScout.xslt"?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0"
            xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0 MvcSiteMapSchema.xsd">...(rest of sitemap spec)

示例XSLT：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"  exclude-result-prefixes="msxsl" xmlns:t="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0"
>

  <xsl:output  omit-xml-declaration="yes" method="html" indent="yes"/>


      <xsl:template match="/">


        <div class="span-20 last" style="margin-left:100px;height:25px; border-top: solid 1px Gray; width:79%">
            <link rel="stylesheet" type="text/css" href="Content/CSS/jqueryslidemenu.css" />

            <style type="text/css">
              .showSubMenu{
              visibility: visible;
              }



              .hover:hover a{
                visibility: visible;

              }


            </style>
<div id="myslidemenu" class="jqueryslidemenu" style="margin-left: 0px;">

<ul>
    <xsl:for-each select="/t:mvcSiteMap/t:mvcSiteMapNode/t:mvcSiteMapNode">

            <li class="hover">

              <a  href="#">
              <xsl:value-of select="./@title"></xsl:value-of>
              </a>



              <xsl:if test="count(./t:mvcSiteMapNode) &gt; 0">


                  <ul >

                  <xsl:for-each select="./t:mvcSiteMapNode">

                    <li  >
                      <a href="#" >
                          <xsl:value-of select="./@title"></xsl:value-of>
                      </a>
                    </li>

                  </xsl:for-each>
                  </ul>

              </xsl:if>

            </li>
        </xsl:for-each>

    </ul>
</div>


</div>


    </xsl:template>
</xsl:stylesheet>

样本指令：

; (function () {
    'use strict';
    angular.module('scout').directive("siteMapMenu", siteMapMenu);

    function siteMapMenu() {

        return {
            replace: true,
            restrict: 'E',
            templateUrl: "ScoutSitemap.xml",
            //templateUrl: "TestMap1.html",
            controller: [
                '$scope', '$filter', siteMapController
            ]
        };

    }

    function siteMapController($scope, $filter) {
        $scope.ShowMaintenance = false;
        $scope.ShowReports = false;
        $scope.ShowFileDownload = false;
        $scope.ShowHelp = false;

    }

})();

Answer 1

我添加了以下方法并从指令的控制器中适当地访问它们以实现我拍摄的内容。

function loadXMLDoc(filename) {

    var xhttp = {};
    if (window.ActiveXObject) {
        xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        xhttp = new XMLHttpRequest();
    }

    xhttp.open("GET", filename, false);
    try { xhttp.responseType = "xml" } catch (err) { } // Helping IE11
    xhttp.send("");

    return xhttp.responseXML;
}

function displayResult($scope) {
    var xml = {};
    var xsl = {};
    var xhttp = {};
    var xsltProcessor = {};
    var resultDocument = {};
    xml = loadXMLDoc("ScoutSitemap.xml");

    xsl = loadXMLDoc("Views/Shared/SiteMapScout.xslt");
    if (window.ActiveXObject || xhttp.responseType == "msxml-document")
    {
        ex = xml.transformNode(xsl);
        document.getElementById("myfill").innerHTML = ex;
    }
        // code for Chrome, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument) {

         xsltProcessor = new XSLTProcessor();
         xsltProcessor.importStylesheet(xsl);

        resultDocument = xsltProcessor.transformToFragment(xml, document);
        $scope.resp = resultDocument.textContent;

        document.getElementById("myfill").appendChild(resultDocument);
    }
}

Angular指令可以依赖于xslt的xml转换吗？

1 个答案: