AngularJs: не может переключать видимость двух элементов

я использую этот подход:AngularJs: не может переключать видимость двух элементов

app.js

(function(){ 

    var app = angular.module('myApp', ['fsCordova']); 

    app.controller('MyController', function($scope, CordovaService) { 

     this.ready = false; 

     CordovaService.ready.then(function() { 

      console.log ("CordovaService.ready received"); 
      this.ready = true; 
     }); 

    }); 

})();

I может увидеть в консоли сообщение CordovaService.ready получил. Таким образом, код работает.

В моем index.html У меня есть (только полезная часть).

<body ng-controller="MyController"> 
     <div class="app"> 
      <h1>Apache Cordova</h1> 
      <div id="deviceready" class="blink"> 
       <p class="event listening" ng-hide="ready">Connecting to Device</p> 
       <p class="event received" ng-show="ready">Device is Ready</p> 
      </div> 
     </div> 
     <script type="text/javascript" src="cordova.js"></script> 
    </body>

Только для Маттар полноты, это соответствующая часть .css файла

.event.listening { 
    background-color:#333333; 
} 

.event.received { 
    background-color:#4B946A; 
} 

.blink { 
    animation:fade 3000ms infinite; 
}

Я повторю: я может увидеть в консоли сообщение CordovaService.ready получил , Таким образом, js-код работает.

Проблема заключается в том, что: «Подключение к устройству» остается видимым, даже если MyController.ready установлена истина

Как отлаживать

источник

2014-07-17 realtebo

и вы не видите «Устройство готово» как хорошо? – V31

точно, я не вижу «Устройство готово» – realtebo

H вы пробовали то, что предложил Александр? – V31

Вы должны использовать $scope для совместного использования состояния между контроллером шаблона.

app.controller('MyController', ['$scope', 'CordovaService', function($scope, CordovaService) { 

    $scope.ready = false; 
    CordovaService.ready.then(function() { 
     console.log ("CordovaService.ready received"); 
     $scope.ready = true; 
    }); 

}]);

источник

2014-07-17 09:46:18 Vadim

Также он может добавить префикс контроллера в шаблон MyController.ready –

Что такое «префикс контроллера»? – realtebo

@ Пространство имен GenaMoroz Controller не должно использоваться для свойств, которые могут быть изменены, только как пространство имен для функций, которые контроллер хочет выставить как открытый API. Обычно это делается для повышения производительности цикла дайджестов, поскольку наблюдаются только члены области видимости. Размещение значений, которые должны быть изменены и просмотрены, является известным анти-шаблоном. – Vadim

Попробуйте использовать $scope.ready вместо this.ready

Редактировать: Мой ответ был довольно коротким, вот расширенная версия:

Как говорится в документации:

Scope is the glue between application controller and the view

Если вы хотите выставить переменную и получить обновленное значение в своем представлении, вам будет нужно использовать $ scope. Если вы используете this, вы имеете в виду локальную область внутри вашего контроллера, и представление не имеет возможности узнать эту переменную.

источник

2014-07-17 09:45:44

Не помните, чтобы уточнить некоторые детали об изменении? Почему это требуется? – Shubh

Вы правы, я обновил свой ответ;) –

вам нужно иметь внешний вид контроллера, как это:

(function(){ 

    var app = angular.module('myApp', ['fsCordova']); 

    app.controller('MyController', ['$scope','CordovaService',function($scope, CordovaService) { 

     $scope.ready = false; 

     CordovaService.ready.then(function() { 

      console.log ("CordovaService.ready received"); 
      $scope.ready = true; 
     }); 

    }]); 

})();

Фактическая причина, почему this.ready не работает внутри CordovaService.ready.then (функция() {}) функция была «this» будет использовать область текущей функции, которая имеет значение CordovaService.ready.then (function(), а не область видимости, поэтому ваша область не обновлялась.

источник

2014-07-17 10:24:59 V31

Ваш код вызовет ошибку, так как вы сообщите инжектору, что вы хотите ввести «КордоваСервис» в качестве первого аргумента ($ scope), а второй аргумент (CordovaService) будет не определен – Vadim

исправлено! благодаря! – V31

AngularJs: не может переключать видимость двух элементов

ответ

Смежные вопросы