Как использовать угловой контроллер JS дважды

0

Мне нужна ваша помощь, чтобы понять, что здесь происходит. Взглянуть:

Я создаю мобильное приложение hibrib в Intel xdk, используя AngularJS + JQuery Mobile. Я использую контроллер подачи, который имеет список объектов (элементов) и активный объект (фактический). Я использую тот же контроллер в двух div JQuery Mobile с date-role = "page". Первый, список exibirAtual, задает фактическое значение (значение для действительной переменной) в методе exibirAtual, вызываемое, когда кто-то нажимает элемент в списке exibirAtual, после того, как задана переменная, вызывается другая страница, на этой странице я буду показать подробности об этом элементе фида. При доступе к {{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: страница списка каналов:

'
    <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>

В этом элементе, когда вы нажимаете тело, вы вызываете метод feed.exibirAtual в элементе, указанном этой директивой в цикле ng-repeat.

Страница, показывающая детали, такова:

<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>

Существует еще один контроллер, идиома, но он работает нормально. Страница feedUnico ничего не показывает. Кто-нибудь имеет представление о том, что происходит?

Теги:
jquery-mobile
angularjs-controller
intel-xdk

2 ответа

1

Что вам нужно сделать, так это создать службу, которая будет делиться информацией между ними. Я нахожусь на своем телефоне, поэтому мне трудно перевести код передо мной, по сути, что-то вроде:

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

Я не нашел решение, но я решил проблему. При использовании контроллера в двух отдельных областях DOM они не могут использовать одну и ту же информацию о модуле, поэтому, если я дважды звоню, невозможно будет обменять переменные между двумя экземплярами.

Больше информации здесь: https://groups.google.com/forum/#!topic/angular/SQcWaMqsZZs

  • 0
    Предпочтительный способ сделать это с помощью службы. Это синглтоны, которые вы можете вставить в свой контроллер для обмена данными и поведением, которые будут рассматриваться как общие проблемы. docs.angularjs.org/guide/services

Ещё вопросы

Сообщество Overcoder
Наверх
Меню