asp.net mvc - 生成菜单 HTML 并从 Angularjs 和 mvc 绑定 div

Question

我正在mvc控制器中从XML生成html菜单字符串，在angularjs中，我将响应传递给div，例如$（"#divId"）.html（response）。

它工作正常，但有些菜单有子菜单，所以打开的类没有调用，所以它不显示子菜单

请说出我哪里做错了。

Answer 1

在 angular 中，切勿在指令外使用 $（）（通常使用 angular.element（） 代替......但无论如何，你不需要它 99% 的时间）如果要将一些 HTML 动态添加到角度模板中，请使用 ng-bind-html 属性。

在控制器中

$scope.mymenu = response;

在你的网页中

<div ng-bind-html="response"></div>

你可能会遇到一个角度不信任你的HTML的情况。你必须使用一些角度服务来说明你的HTML应该是信任的（如果它是一个正确的来源）。

这里有一个关于如何使角度信任你的HTML的好话题

希望它有帮助。

编辑

这是这个命题的一个工作

结论

看起来第一个问题是你试图将你的HTML写入控制器，这是一件坏事。

相反，您应该尝试生成一个像这样的JS对象：

$scope.mymenu = [{
  name:"Adminitstration",
  url:"/Administration",
},{
  name: "My Dashboard",
  url:"/mydashboard",
  submenus: [{
    name:"Activity dashboard",
    url:"/activity",
  }]
},{
  name: "Profiles",
  url:"/profiles",
  submenus: [{
    name:"Accounts",
    url:"/accounts",
  }]
}]

并使用角度模板根据这些内容渲染HTML

<ul>
  <li ng-click="menu.submenusShow = !menu.submenusShow" ng-repeat="menu in mymenu">
    <a href="{{menu.submenus.length ? '#' : menu.url}}">{{menu.name}}</a>
    <ul ng-show="menu.submenusShow">
      <li  ng-repeat="submenu in menu.submenus">
        <a href="{{menu.url+submenu.url}}">{{submenu.name}}</a>
      </li>
    </ul>
  </li>
</ul>