Question

这是我的第一个问题，所以我害怕成为一个愚蠢的问题，但我之前做了很多研究，并花了很多我们试图通过更改代码来解决这个问题。我是一个相对较新的网络应用程序编程，可能缺少一些可能阻碍我前进的概念性知识。

环境和工具：使用cordova，onsen ui，Android studio，angularjs在我的专业领域开发一种工程师计算器，我不是专业程序员。

该应用程序基于一系列页面连接，如下面的用户数据/页面流程，应用程序正常工作，除了我要求帮助的问题。

（我无法发布图片）

这是一个像这样的数据流：

menu.html＆gt;＆gt; page1.html＆gt;＆gt; load.html

对于每个html页面视图，我都有一个控制器模块，所有模块都在同一个控制器文件中。例如，index.html中定义的滑动菜单调用page1.html，这是唯一一个具有SVG图形的页面，而不是通过onclick Push页面链接到load.html页面。请参阅以下页面代码：

menu.html

<body onload="onLoad()" ng-app="calcfcc" ng-controller="calcfccController">

<!-- to transfer to AS start here -->

<ons-sliding-menu
        menu-page="menu.html" main-page="page1.html" side="left"
        var="menu" type="reveal" max-slide-distance="200px" swipable="true">
</ons-sliding-menu>

<!-- sliding-menu - Menu list here!!! -->

<ons-template id="menu.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <ons-list class="menu-list">

            <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-home"></ons-icon>
                {{menu1}}
            </ons-list-item>

从幻灯片菜单调用

page1.html：

<ons-navigator animation="slide" var="page1navi">
<ons-page ng-controller="initController" on-device-backbutton="backbuttonpage()" style="background: #001a00;">




    <ons-toolbar fixed-style>
        <div class="left">
            <ons-toolbar-button id="popoverb1" ng-click="menu.toggle()">
                <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center">
            {{pageheader1}}
        </div>
        <div class="right" style="padding: 7px;">
                <img src="img/AASis78x31branco.png" alt="AASis" >
        </div>
    </ons-toolbar>

从可点击的SVG图标调用load.html的

page1.html部分：

<g
                id="g4533"
                onclick="page1navi.pushPage('load.html', { animation : 'slide' } )"
                transform="translate(0,-66.958368)">
            <rect
                    style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4485);fill-opacity:1;fill-rule:evenodd;stroke:#6e6e6e;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
                    id="rect10449"
                    width="60"
                    height="60"
                    x="275.33713"
                    y="786.85248"
                    rx="6.7857499"
                    ry="6.3835001" />

load.html页面：

<ons-page ng-controller="loadController">
<ons-toolbar>
    <div class="left"><ons-back-button>{{about1}}</ons-back-button></div>
</ons-toolbar>



<p class="textarea" style="font-size: 20px; border: 2px solid #0066FF; margin: 5px">
    {{load1}}
</p>

所以我的问题是page1.html控制器加载正常，load.html控制器也正常加载并使其工作但是当按下load.html页面“返回”按钮返回page1.html的page1控制器没有加载，我无法使用我在load.html上操作的数据刷新视图。

这不是关于全局变量，只是没有加载正确的控制器。

当一个来自index.html的被调用的page1.html工作时，我可以要求用户返回侧面菜单只是为了刷新。同样重新加载所有这些都不是一个选项，对用户来说非常烦人。

知道如何解决这个问题吗？

先进的TKS !!!!

Answer 1

控制器仅在创建页面时运行一次。当您使用后退按钮时，您正在销毁load.html并返回page1.html，但这个已经在页面堆栈中创建，因此其控制器不会再次被调用。此外，AngularJS只会在Angular的范围内完成更改。否则，您需要使用$scope.$apply()让Angular了解更改。您可以在Onsen UI postpop event上使用$scope.$apply()。

在任何情况下，如果您使用的是AngularJS，我认为您应该ng-click而不是onclick。此外，您可以将文本区域绑定到范围变量using ng-model，因此您在视图中执行的每个更改都将自动存储。我认为这两个变化应该足够了。

希望它有所帮助！

从推送页面通过<ons-back-button>弹出页面后，不会加载父控制器模块

1 个答案: