javascript - 如何两次使用 Angular JS Controller

Question

我需要你的帮助来了解这里发生的事情。看看:

我正在使用 AngularJS + JQuery Mobile 在 intel xdk 中创建一个 hibrib 移动应用程序。我正在使用一个 feed Controller ，它有一个对象(项目)列表和事件对象(实际)。我在两个带有 date-role="page"的 JQuery Mobile div 中使用相同的 Controller 。第一个，feed列表，设置实际值(实际变量的值)，在exibirAtual方法中，当有人点击feed列表上的某个项目时调用，设置变量后另一个页面是称为，在此页面中我将显示有关此提要项目的详细信息。当在详细信息页面中访问 {{feed.atual.titulo}} 和 {{feed.atual}} 的其他成员时，我看到其中任何一个都已定义，它是, {{feed.atual.titulo}} 给我一个空白值。

    afleinApp.controller('feedController', ['$scope', '$http', function ($scope, $http) {

        var feed = this;
        this.atual = itemFeedExterno;
        feed.itens = []; //[{titulo : "1", descricao: "Lorem Ipsum 2"}, {titulo : "2", descricao: "Lorem Ipsum 2"}, {titulo : "3", descricao: "Lorem Ipsum 3"}];*

        this.coletarDados = function(){
            console.log("inicializando o feed");
            $http({
                 method: 'POST'
                ,url: _URL + "coletarFeedDeUsuario"
                ,data: "username=" + usuarioExterno.nomeDeUsuario//usuarioExportacao.nomeDeUsuario,
                ,headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .success(function(data, status){
                console.log("sucesso ao coletar");
                if(data.status == "erro" ){
                    chamarErro("Houve problemas ao carregar os dados de feed");
                } else if(data.status == "ok"){
                    ///Se teve sucesso, verifica se a lsita é vazia
                    if(data.dado.length == 0){
                        chamarInfo("Não foram encontrados dados de feed");
                    } else {
                        console.log(JSON.stringify(data.dado));
                        feed.itens = data.dado;
                    }
                }
            })
            .error(function(data, status){
                console.log("Houve um erro");
                feed.itens = [{titulo: "Houve um erro", descricao: "Não conseguimos recuperar o feed"}];
            });
        };

        /// Called when user clicks an item to show details
        this.exibirAtual = function(item){
            console.log(JSON.stringify(feed.atual));

            feed.atual = item;
            $.mobile.changePage("#feedUnico");
            /// Next line is to test if object value is passed correctly, and it is
            console.log(JSON.stringify(feed.atual));
        };

    }]);

这两个 Jquery 移动页面是: Feed列表页面:

`
    <div id="feed" data-role="page" ng-controller="feedController as feed" ng-init="feed.coletarDados()">
        <div data-role="header">
            <a href="#" data-rel="back" data-icon="back" title="{{idioma.dados.voltar}}"></a>
            <h1 class="mission cabecalho">{{idioma.dados.titulo}}</h1>
            <a href="#" data-icon="refresh" title="Recarregar" ng-click="feed.coletarDados()"></a>
        </div>

        <div class="bloco-margem">
            <feed-item-evento ng-repeat="item in feed.itens" />
        </div>

        <div class="bloco-margem"></div>

    </div>
`

指令:feed-item-evento是这样的:

<div class="collapse-card" ng-init="visivel='bodyOculto'">
    <div class="title">

        <small
            ng-click="visivel = (visivel == 'bodyActive') ? 'bodyOculto' : 'bodyActive'" >
            {{item.titulo}}
        </small>
    </div>
    <div class="body" ng-class="visivel" ng-click="feed.exibirAtual(item)">
        <span>
            <img class="icone" ng-src="{{item.imagem}}">
        </span>
        <br/>
        {{item.descricao | limitTo : 144 : 0}}...
    </div>
</div>

在此元素中，当您单击正文时，您将在 ng-repeat 循环上调用此指令显示的元素中的 feed.exibirAtual 方法。

显示详细信息的页面是:

<div id="feedUnico" data-role="page" ng-controller="feedController as feed" ng-init="feed.depurar()">
    <div data-role="header">
        <a href="#" data-rel="back" data-icon="back" title="{{idioma.dados.voltar}}"></a>
        <h1 class="mission cabecalho">{{idioma.dados.titulo}}</h1>
    </div>

    <div class="tituloFeedAtual">
        {{feed.atual.titulo}}
    </div>

    <div class="bloco-margem painel-tracejado">
        Aqui entrarão as imagens
    </div>

    <div class="bloco-margem painel-tracejado">
        <span class="dataTitulo">De: </span>
        <span class="data">{{feed.atual.dataInicial}}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span class="dataTitulo">Até: </span>
        <span class="data">{{feed.atual.dataFinal}}</span>
    </div>

    <div class="bloco-margem painel-tracejado">
        {{feed.atual.descricao}}
    </div>
</div>

还有另一个 Controller ，idioma，但它工作正常。 feedUnico 页面没有显示任何内容。有人知道发生了什么吗？

Answer 1

您需要做的是创建一个在两者之间共享信息的服务。我在手机上，所以很难让我面前的代码本质上是这样的:

var something;
return {
    get: function() { 
          return something;
     },
     set: function(data) { 
          something = data;
     }
}