Angular-JQM 页面结构答案

【问题标题】：Angular-JQM Page StructureAngular-JQM 页面结构
【发布时间】：2013-09-12 07:50:32
【问题描述】：

jqm 用于制作网站 angular-jqm 中的页面结构是什么，我有点难以理解我使用了页面结构如下所示的 JQM

<div data-role="page" id="pageId">
     <div data-role="header">
     </div>
     <div data-role="content">
     </div>
     <div data-role="footer">
     </div>
</div>

那么angular-jqm中的页面结构如何？

【问题讨论】：

你选择jqm和angular一起使用的原因是什么？
用于测试目的。我在这些技术上做了我的学期项目。但我的结论是，如果我们一起使用它们，我们就会失去这两种技术的好处。无论如何，我在去年就这样做了，所以如果有任何新事物出现，请分享您的经验。谢谢
我同意你说的。当我们努力一起使用它们时，我们真的失去了两者的好处。我的观点是，如果您选择使用 Angular，因为它几乎为您提供了创建应用程序所需的整个包，而不是只使用它并尽量不要使用更多框架，除非建议使用 Angular。但这只是我自己的经验，其他人可能会有不同的想法。我还可以补充一点，我最近读到了一个新框架，该框架假设适合 Angular（特别是在移动应用程序中）称为 Ionic，我可能会考虑对其进行测试。
是的。我还阅读了关于它基于角度和完全相互支持的离子。比 jqm 好很多

标签： jquery-mobile angularjs

【解决方案1】：

如果整个应用都需要一个控制器：

<body ng-app="JqmApp">
    <div ng-controller="JqmCtrl">
      <div data-role="page" id="pageId">
        <div data-role="header">
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer">
        </div>
      </div>
    </div>
  </body>

如果每个页面都需要一个控制器（更有可能）：

<body ng-app="JqmApp">
      <div data-role="page" id="pageId" ng-controller="JqmCtrl">
        <div data-role="header">
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer">
        </div>
      </div>

      <div data-role="page" id="pageId2" ng-controller="JqmCtrl2">
        <div data-role="header">
        </div>
        <div data-role="content">
        </div>
        <div data-role="footer">
        </div>
      </div>
  </body>

也很有用：

【讨论】：

如果我需要一个 controller 四个页面我的场景是在我的索引页面中几乎有 16 个页面（16 个 div 和 data-role="page"）并且我有四个不同的 controller四页然后我如何在单独的divs 中定义围绕每四页的ng-controller 标签？（例如div 中的前四页和第二div 中的后四页等等..）
如果 4 个页面确实需要共享一个控制器，您可以这样做，但如果只需要这样，还有其他方法可以共享 $scope。此外，如果这组 4 个页面看起来几乎相同，您可以创建一个模板或 ngDirective，而不是有 16 个单独的页面。