用跨度替換標記

Question

我正在製作一個使用AngularJS和mmenu的菜單，並且我有一些子菜單不能正確地作爲子菜單。本質上，mmenu將span視爲菜單，當您單擊它時，它會展開（或嘗試），並將標記視爲鏈接，當您點擊菜單時，菜單會關閉並嘗試將您發送到鏈接。問題是，當我用ng-ng重複我的菜單時，我的一些項目是鏈接（a），有些應該有更多子菜單使它們跨越。我能想到的一些方法來解決這個問題，但我似乎無法使他們的工作，這裏是我已經試過了解決方案：

1. 使用NG-click函數來運行一個if語句，看看是否菜單被點擊有一個嵌套的ul，如果它添加類mm.opened擴展子菜單，而不是跟隨鏈接

2. 使用函數來運行整個菜單後，它建立並找到任何<a>標記（「span」+ this.innerHTML +「/ span」）替換一個標籤

3. 尋求幫助（當前步驟）

我願意接受任何解決方案真的，我的角度可能是錯誤的，其可能會導致我的所有問題，以便隨時糾正我就可以了。

，因爲我的菜單是由JSON文件建立，我不能導入JSON代碼編輯器（據我所知）

這是我的菜單我不能附加一個工作示例：

<ul> 
    <li><a ng-href="#/home" class="menuBtn">Home</a></li> 
    <li ng-repeat="menu in menuInfo" ng-class="countDisable(menu.schematics.length, menu)"> <a class="menuBtn">ATA {{menu.ata}} - {{menu.name}}</a> 
    <ul> 
     <li ng-click="subCheck()" ng-repeat="submenu in menu.schematics"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a> 
     <ul> 
      <li ng-repeat="animated in submenu.subs"><a ng-href="#{{animated.view}}" ng-click="contentCtrl(animated)" class="menuBtn">{{animated.name}}</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

它看起來像這樣：

當我點擊ATA 29它擴展到這一點：

你會看到ATA 29中有4個項目，其中3個應定期環節，第一個同時擁有四個嵌套的項目，所以當我點擊它，我希望它擴大就像ATA 29做，而是它認爲它的一個鏈接，以便它這樣做：

我意識到這是很難幫助沒有工作的代碼，但任何幫助，將不勝感激。

var app = angular.module('myApp', ['ngRoute']) 
 

 
.config(['$routeProvider', 
 
    function($routeProvider) { 
 
    //determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file 
 
    $routeProvider 
 
     .when('/', { 
 
     controller: 'projectController', 
 
     templateUrl: './assets/html/home.html' 
 
     }) 
 
     .when('/schematicView', { 
 
     controller: 'projectController', 
 
     templateUrl: './assets/html/schematicView.html' 
 
     }) 
 
     .when('/staticView', { 
 
     controller: 'projectController', 
 
     templateUrl: './assets/html/staticView.html' 
 
     }) 
 
     .otherwise({ 
 
     controller: 'projectController', 
 
     templateUrl: './assets/html/home.html' 
 
     }) 
 
    } 
 
]); 
 

 
app.controller('projectController', function projectController($scope, $http, $rootScope, $timeout) { 
 
    // $(document).ready(function($) { 
 
    //  setTimeout(function() { 
 
    //   $("#menu").mmenu({ 
 
    //    "slidingSubmenus": false, 
 
    //    "counters": true, 
 
    //    extensions: ["multiline"], 
 
    //    offCanvas: { 
 
    //     position: "left", 
 
    //     zposition: "front" 
 
    //    } 
 
    //   }); 
 
    //  }, 100); 
 
    //  // $("#menu").click(function() { 
 
    //  //  $('.mm-opened').removeClass('mm-opened'); 
 
    //  // }); 
 
    // }); 
 

 
    $scope.menuInfo = [{ 
 
    name: "This is a span it should expand" 
 
    }]; 
 
    $scope.secMenuInfo = [{ 
 
    name: "This is an a, it should close the menu", 
 
    name2: "This is an a, but it needs to work like a span", 
 
    name3: "This is an a, it should close the menu" 
 
    }]; 
 

 

 

 
    // $scope.activeID = 'HM'; 
 
    // $scope.activePath = "Assets/images/allActive.png"; 
 

 
    // function getImgPath(item) { 
 
    //  $scope.activePath = "Assets/images/" + item.path + ""; 
 
    //  console.log($scope.activePath); 
 
    // } 
 

 
    // $("#menu em").trigger("count"); 
 

 
    $scope.setImgPath = function(btnPath) { 
 
    console.log(btnPath) 
 
    $scope.activePath = "Assets/images/" + btnPath + ""; 
 
    console.log($scope.activePath); 
 
    }; 
 
    $scope.contentCtrl = function(id) { 
 
    $scope.active = id; 
 
    console.log($scope.active); 
 
    // $scope.activeItem = item; 
 
    // getImgPath($scope.activeItem); 
 

 

 
    }; 
 
    // $scope.subCheck = function() { 
 
    //  if ($(this).children().find('mm-counter')) { 
 
    //   alert("has ul"); 
 
    //   return false; 
 
    //  } else { 
 
    //   alert("no ul"); 
 
    //   return false; 
 
    //  } 
 

 
    // }; 
 

 

 

 
}); 
 

 
app.directive("mmenu", function($timeout) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope, element, attrs) { 
 

 
     $timeout(function() { 
 
      $(element).mmenu({ 
 
      "slidingSubmenus": false, 
 
      "counters": true, 
 
      extensions: ["multiline"], 
 
      offCanvas: { 
 
       position: "left", 
 
       zposition: "front" 
 
      } //ends offCanvas 
 
      }); 
 

 
      $("em").each(function() { 
 
      var t = $(this).text().trim(); 
 
      if (t == "0") { 
 
       $(this).next().remove(); 
 

 
       $(this).remove(); 
 

 
      } 
 
      }); 
 
     }, 10); 
 
     } //ends link 
 
    } 
 

 
});

/* Helvetica Font */ 
 

 
@font-face { 
 
    font-family: HelveticaNeue; 
 
    src: local('0'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Lt.otf') format('otf'); 
 
} 
 
body, 
 
html { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    overflow: none; 
 
    color: #FFF; 
 
} 
 
body { 
 
    background: #FFFFFF; 
 
} 
 
#header { 
 
    background: #212121; 
 
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 
 
} 
 
#footer { 
 
    background: #212121; 
 
    box-shadow: 0 -1.5px 4px rgba(0, 0, 0, 0.24), 0 -1.5px 6px rgba(0, 0, 0, 0.12); 
 
} 
 
.fa { 
 
    color: #8ea5d0; 
 
} 
 
.fa:hover { 
 
    color: #627EB0; 
 
} 
 
.fa:active { 
 
    color: #415E95; 
 
} 
 
a:focus { 
 
    outline: 0 none; 
 
    color: #627EB0; 
 
    text-decoration: none; 
 
} 
 
.info_btn { 
 
    color: #FFF !important; 
 
    background-color: #8ea5d0; 
 
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 
 
} 
 
.info_btn:hover { 
 
    background-color: #627EB0; 
 
} 
 
.info_btn:active { 
 
    background-color: #415E95; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
} 
 
.info_btn:hover, 
 
.info_btn:visited, 
 
.info_btn:link, 
 
.info_btn:active { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
#menu { 
 
    background: #444444; 
 
    box-shadow: 5px 0px 4px rgba(0, 0, 0, 0.3); 
 
    z-index: 10; 
 
} 
 
#menu .li { 
 
    background: #555555; 
 
} 
 
#menu > ul > li { 
 
    list-style: none; 
 
} 
 
#menu > ul { 
 
    padding: 0px; 
 
} 
 
.menuBtn { 
 
    background-color: transparent; 
 
    display: inline-flex; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    border: #212121; 
 
    border-bottom-style: solid; 
 
    border-width: 1px; 
 
    width: 100%; 
 
    font-size: 17px; 
 
    padding: 10px 10px; 
 
    -webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
    -moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
    -o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
    transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
    outline: none; 
 
} 
 
.menuBtn:hover { 
 
    background-color: #333333; 
 
    outline: none; 
 
} 
 
.menuBtn:active { 
 
    position: relative; 
 
    background-color: #222222; 
 
    outline: none; 
 
} 
 
#homeContent { 
 
    color: #000000; 
 
} 
 
/* Global and Overrides */ 
 

 
#header { 
 
    height: 96px; 
 
    border: 0; 
 
    top: 0px; 
 
    width: 100%; 
 
} 
 
#content { 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 96px; 
 
    bottom: 72px; 
 
} 
 
#footer { 
 
    height: 72px; 
 
    border: 0; 
 
    bottom: 0px; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
.fa { 
 
    font-size: 36px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding-top: 30px; 
 
    padding-left: 30px; 
 
} 
 
.title { 
 
    position: absolute; 
 
    right: 75px; 
 
    top: 20px; 
 
    max-width: 400px; 
 
} 
 
.info_btn { 
 
    position: absolute; 
 
    font-size: 40px; 
 
    font-weight: 400; 
 
    right: 30px; 
 
    top: 48px; 
 
    border-radius: 50px; 
 
    padding: 0 21.8px; 
 
    font-size: 20px; 
 
    line-height: 48px; 
 
    position: absolute; 
 
    top: 72px; 
 
    right: 1.6%; 
 
    z-index: 100; 
 
} 
 
/* causes the color to change when you hover over a button of class myButton */ 
 

 
.revNum { 
 
    font-size: 16px; 
 
    position: absolute; 
 
    bottom: 25px; 
 
    left: 12px; 
 
} 
 
.footer_info { 
 
    bottom: 25px; 
 
    position: absolute; 
 
    margin: 0px auto; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.logo { 
 
    height: 48px; 
 
    position: absolute; 
 
    bottom: 12px; 
 
    right: 75px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="projectController"> 
 
    <title>{{projectInfo.title}}</title> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 

 
     <a class="fa fa-home" ng-href="#/home"></a> 
 
     <img class="title" src="assets/images/title.svg"></img> 
 
     <a href class="info_btn"><span>i</span></a> 
 
     <nav id="menu" mmenu> 
 
     <ul> 
 
      <li><a ng-href="#/home" class="menuBtn">Home</a> 
 
      </li> 
 
      <li ng-repeat="menu in menuInfo" ng-class="countDisable(menu.schematics.length, menu)"> <span class="menuBtn">ATA {{menu.ata}} - {{menu.name}}</span> 
 
      <ul> 
 
       <li ng-repeat="submenu in secMenuInfo"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a> 
 
       <li ng-repeat="submenu in secMenuInfo"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name2}}</a> 
 
       <ul> 
 
        <li ng-repeat="animated in secMenuInfo"><a ng-href="#{{animated.view}}" ng-click="contentCtrl(animated)" class="menuBtn">{{submenu.name3}}</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    <div id="content"> 
 
     <a href="#menu" target="_self"><h1>HOME</h1></a> 
 
    </div> 
 
    <div id="footer"> 
 
     <div class="revNum">Revision: {{projectInfo.version}}</div> 
 
     <div class="footer_info">{{projectInfo.footer}}</div> 
 
     <img class="logo" ng-src="./assets/images/{{projectInfo.logo}}"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 1

• 兄弟li沒有關閉，並已成爲一個嵌套菜單，但不正確的安裝是一個子菜單。

• li沒有像我預期的那樣產生span它應該有。所以我只是複製了我在頂部菜單中看到的模式，並且它工作正常。

更改此：

<li ng-repeat="submenu in secMenuInfo"> 
    <a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a> 
    <li ng-repeat="submenu in secMenuInfo"> 
    <a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name2}}</a> 

要這樣：

<li ng-repeat="submenu in secMenuInfo"> 
    <a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a> 
</li> 
<li ng-repeat="submenu in secMenuInfo"> 
    <span class="menuBtn">{{submenu.name2}}</span> 

<!DOCTYPE html> 
 
<html> 
 
<meta charset="utf-8"> 
 

 
<head> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.css" rel="stylesheet" /> 
 

 
    <style> 
 
    /* Helvetica Font */ 
 
    @font-face { 
 
     font-family: HelveticaNeue; 
 
     src: local('0'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Lt.otf') format('otf'); 
 
    } 
 
    body, 
 
    html { 
 
     font-family: Helvetica, Arial, sans-serif; 
 
     overflow: none; 
 
     color: #FFF; 
 
    } 
 
    body { 
 
     background: #FFFFFF; 
 
    } 
 
    #header { 
 
     background: #212121; 
 
     box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 
 
    } 
 
    #footer { 
 
     background: #212121; 
 
     box-shadow: 0 -1.5px 4px rgba(0, 0, 0, 0.24), 0 -1.5px 6px rgba(0, 0, 0, 0.12); 
 
    } 
 
    .fa { 
 
     color: #8ea5d0; 
 
    } 
 
    .fa:hover { 
 
     color: #627EB0; 
 
    } 
 
    .fa:active { 
 
     color: #415E95; 
 
    } 
 
    a:focus { 
 
     outline: 0 none; 
 
     color: #627EB0; 
 
     text-decoration: none; 
 
    } 
 
    .info_btn { 
 
     color: #FFF !important; 
 
     background-color: #8ea5d0; 
 
     box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 
 
    } 
 
    .info_btn:hover { 
 
     background-color: #627EB0; 
 
    } 
 
    .info_btn:active { 
 
     background-color: #415E95; 
 
     color: #FFF; 
 
     text-decoration: none; 
 
    } 
 
    .info_btn:hover, 
 
    .info_btn:visited, 
 
    .info_btn:link, 
 
    .info_btn:active { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    } 
 
    #menu { 
 
     background: #444444; 
 
     box-shadow: 5px 0px 4px rgba(0, 0, 0, 0.3); 
 
     z-index: 10; 
 
    } 
 
    #menu .li { 
 
     background: #555555; 
 
    } 
 
    #menu > ul > li { 
 
     list-style: none; 
 
    } 
 
    #menu > ul { 
 
     padding: 0px; 
 
    } 
 
    .menuBtn { 
 
     background-color: transparent; 
 
     display: inline-flex; 
 
     cursor: pointer; 
 
     color: #ffffff; 
 
     border: #212121; 
 
     border-bottom-style: solid; 
 
     border-width: 1px; 
 
     width: 100%; 
 
     font-size: 17px; 
 
     padding: 10px 10px; 
 
     -webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
     -moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
     -o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
     transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out; 
 
     outline: none; 
 
    } 
 
    .menuBtn:hover { 
 
     background-color: #333333; 
 
     outline: none; 
 
    } 
 
    .menuBtn:active { 
 
     position: relative; 
 
     background-color: #222222; 
 
     outline: none; 
 
    } 
 
    #homeContent { 
 
     color: #000000; 
 
    } 
 
    /* Global and Overrides */ 
 
    #header { 
 
     height: 96px; 
 
     border: 0; 
 
     top: 0px; 
 
     width: 100%; 
 
    } 
 
    #content { 
 
     width: 100%; 
 
     position: fixed; 
 
     top: 96px; 
 
     bottom: 72px; 
 
    } 
 
    #footer { 
 
     height: 72px; 
 
     border: 0; 
 
     bottom: 0px; 
 
     position: fixed; 
 
     width: 100%; 
 
    } 
 
    .fa { 
 
     font-size: 36px; 
 
     cursor: pointer; 
 
     display: inline-block; 
 
     padding-top: 30px; 
 
     padding-left: 30px; 
 
    } 
 
    .title { 
 
     position: absolute; 
 
     right: 75px; 
 
     top: 20px; 
 
     max-width: 400px; 
 
    } 
 
    .info_btn { 
 
     position: absolute; 
 
     font-size: 40px; 
 
     font-weight: 400; 
 
     right: 30px; 
 
     top: 48px; 
 
     border-radius: 50px; 
 
     padding: 0 21.8px; 
 
     font-size: 20px; 
 
     line-height: 48px; 
 
     position: absolute; 
 
     top: 72px; 
 
     right: 1.6%; 
 
     z-index: 100; 
 
    } 
 
    /* causes the color to change when you hover over a button of class myButton */ 
 
    .revNum { 
 
     font-size: 16px; 
 
     position: absolute; 
 
     bottom: 25px; 
 
     left: 12px; 
 
    } 
 
    .footer_info { 
 
     bottom: 25px; 
 
     position: absolute; 
 
     margin: 0px auto; 
 
     width: 100%; 
 
     font-size: 18px; 
 
     display: block; 
 
     text-align: center; 
 
    } 
 
    .logo { 
 
     height: 48px; 
 
     position: absolute; 
 
     bottom: 12px; 
 
     right: 75px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="projectController"> 
 
    <title>{{projectInfo.title}}</title> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 

 
     <a class="fa fa-home" ng-href="#/home"></a> 
 
     <img class="title" src="assets/images/title.svg"></img> 
 
     <a href class="info_btn"><span>i</span></a> 
 
     <nav id="menu" mmenu> 
 
     <ul> 
 
      <li><a ng-href="#/home" class="menuBtn">Home</a> 
 
      </li> 
 
      <li ng-repeat="menu in menuInfo" ng-class="countDisable(menu.schematics.length, menu)"> <span class="menuBtn">ATA {{menu.ata}} - {{menu.name}}</span> 
 
      <ul> 
 
       <li ng-repeat="submenu in secMenuInfo"><a ng-href="#{{submenu.view}}" class="menuBtn">{{submenu.name}}</a> 
 
       </li> 
 
       <li ng-repeat="submenu in secMenuInfo"><span class="menuBtn">{{submenu.name2}}</span> 
 
       <ul> 
 
        <li ng-repeat="animated in secMenuInfo"><a ng-href="#{{animated.view}}" ng-click="contentCtrl(animated)" class="menuBtn">{{submenu.name3}}</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    <div id="content"> 
 
     <a href="#menu" target="_self"><h1>HOME</h1></a> 
 
    </div> 
 
    <div id="footer"> 
 
     <div class="revNum">Revision: {{projectInfo.version}}</div> 
 
     <div class="footer_info">{{projectInfo.footer}}</div> 
 
     <img class="logo" ng-src="./assets/images/{{projectInfo.logo}}"> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.js"></script> 
 
    <script> 
 
    var app = angular.module('myApp', ['ngRoute']) 
 

 
    .config(['$routeProvider', 
 
     function($routeProvider) { 
 
     //determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file 
 
     $routeProvider 
 
      .when('/', { 
 
      controller: 'projectController', 
 
      templateUrl: './assets/html/home.html' 
 
      }) 
 
      .when('/schematicView', { 
 
      controller: 'projectController', 
 
      templateUrl: './assets/html/schematicView.html' 
 
      }) 
 
      .when('/staticView', { 
 
      controller: 'projectController', 
 
      templateUrl: './assets/html/staticView.html' 
 
      }) 
 
      .otherwise({ 
 
      controller: 'projectController', 
 
      templateUrl: './assets/html/home.html' 
 
      }) 
 
     } 
 
    ]); 
 

 
    app.controller('projectController', function projectController($scope, $http, $rootScope, $timeout) { 
 
     // $(document).ready(function($) { 
 
     //  setTimeout(function() { 
 
     //   $("#menu").mmenu({ 
 
     //    "slidingSubmenus": false, 
 
     //    "counters": true, 
 
     //    extensions: ["multiline"], 
 
     //    offCanvas: { 
 
     //     position: "left", 
 
     //     zposition: "front" 
 
     //    } 
 
     //   }); 
 
     //  }, 100); 
 
     //  // $("#menu").click(function() { 
 
     //  //  $('.mm-opened').removeClass('mm-opened'); 
 
     //  // }); 
 
     // }); 
 

 
     $scope.menuInfo = [{ 
 
     name: "This is a span it should expand" 
 
     }]; 
 
     $scope.secMenuInfo = [{ 
 
     name: "This is an a, it should close the menu", 
 
     name2: "This is an a, but it needs to work like a span", 
 
     name3: "This is an a, it should close the menu" 
 
     }]; 
 

 

 

 
     // $scope.activeID = 'HM'; 
 
     // $scope.activePath = "Assets/images/allActive.png"; 
 

 
     // function getImgPath(item) { 
 
     //  $scope.activePath = "Assets/images/" + item.path + ""; 
 
     //  console.log($scope.activePath); 
 
     // } 
 

 
     // $("#menu em").trigger("count"); 
 

 
     $scope.setImgPath = function(btnPath) { 
 
     console.log(btnPath) 
 
     $scope.activePath = "Assets/images/" + btnPath + ""; 
 
     console.log($scope.activePath); 
 
     }; 
 
     $scope.contentCtrl = function(id) { 
 
     $scope.active = id; 
 
     console.log($scope.active); 
 
     // $scope.activeItem = item; 
 
     // getImgPath($scope.activeItem); 
 

 

 
     }; 
 
     // $scope.subCheck = function() { 
 
     //  if ($(this).children().find('mm-counter')) { 
 
     //   alert("has ul"); 
 
     //   return false; 
 
     //  } else { 
 
     //   alert("no ul"); 
 
     //   return false; 
 
     //  } 
 

 
     // }; 
 

 

 

 
    }); 
 

 
    app.directive("mmenu", function($timeout) { 
 
     return { 
 
     restrict: 'A', 
 
     link: function(scope, element, attrs) { 
 

 
      $timeout(function() { 
 
       $(element).mmenu({ 
 
       "slidingSubmenus": false, 
 
       "counters": true, 
 
       extensions: ["multiline"], 
 
       offCanvas: { 
 
        position: "left", 
 
        zposition: "front" 
 
       } //ends offCanvas 
 
       }); 
 

 
       $("em").each(function() { 
 
       var t = $(this).text().trim(); 
 
       if (t == "0") { 
 
        $(this).next().remove(); 
 

 
        $(this).remove(); 
 

 
       } 
 
       }); 
 
      }, 10); 
 
      } //ends link 
 
     } 
 

 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

Answer 2

在不超通讀問題道歉，這是一個有點長......

這聽起來像你想<span>標籤，以取代所有<a>標籤。一種解決方案是向控制器添加一個函數，將錨文本取出並進行替換，然後通過函數運行ng-repeat中的變量。

$scope.replaceAnchors = function(item) { 
    var matches = /<a\s+[^>]*href="([^"]*)"[^>]*>(.*)<\/a>/i.exec(str); 
    return '<span>' + matches[2] + '</span>'; 
} 

而且在你的模板：

{{replaceAnchors(YOUR.MENU.VARIABLE)}}