Question

我正在使用JQuery Mobile和AngularJs制作移动应用程序我目前正在使用单页结构，这是我的样本

<body  ng-app="myApp">
    <div data-role="page" id="foodscreen" ng-controller="foodModule">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="addfood" ng-controller="foodModule">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="foodLogDetail" ng-controller="foodModule">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <!--  Exercise Module  -->
    <div data-role="page" id="exercisescreen" ng-controller="exerciseModule">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="addexercise" ng-controller="exerciseModule">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="exerciseLogDetail" ng-controller="exerciseModule">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
</body>

我的前3页需要Controller名为foodModule而其他3页需要exerciseModule但是通过这样做我遇到的问题是我的控制器功能调用了3次，如果我只写1页面其他页面不起作用我可以使用任何解决方案来避免这个问题吗？

更新

以下是我的应用的demo

Answer 1

将每个控制器组包裹在专用的[div]元素中，并仅将每个控制器连接一次：

<body  ng-app="myApp">

  <div ng-controller="foodModule">
    <div data-role="page" id="foodscreen">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="addfood">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="foodLogDetail">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
  </div>

  <!--  Exercise Module  -->
  <div ng-controller="exerciseModule">
    <div data-role="page" id="exercisescreen">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="addexercise">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
    <div data-role="page" id="exerciseLogDetail">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed" class="footer_include"></div>
    </div>
  </div>

</body>

控制器函数在AngularJs中调用多次

1 个答案: