Угловые 2 элемента не обновляются при изменении из диалогового окна уведомлений о телефонных разговорах

Question

Я создаю приложение phonegap с угловым2. Я хочу показать диалоговое окно подтверждения и в успешном обратном вызове обновить элементы из углового2. Когда я это делаю, ничего не происходит сразу, но если я обновляю другую модель на странице (что связано с угловым), мое обновление обновляется.

Для диалога подтверждения я использую плагин phonegap: cordova-plugin-dialogs, а метод называется: navigator.notification.confirm(...).

Вот мой полный код моего компонента:

AboutComponent = ng.core 
    .Component({ 
     selector: 'rl-about', 
     templateUrl: 'app/components/about/view.html', 
     directives: [TopBarComponent, ng.router.ROUTER_DIRECTIVES] 
    }) 
    .Class({ 
     constructor: [Config, function(config) { 
      this.config = config; 

      this.title = "About"; 
      this.top_bar_left = "Back"; 
     }], 
     /** 
     * Back btn 
     */ 
     topBarLeftClick: function(){ 
      window.history.back(); 
     }, 
     changeMessage: function(){ 
      this.message = "Test"; 
      var self = this; 
      navigator.notification.confirm(
       "Delete this?", 
       function(buttonIndex) { 
        if(buttonIndex == 1) { //1 = Ok 
         console.log("Message before: " + self.message) //self.message has the old value ("Test") 
         self.message = "Deleted"; 
         console.log("Message after: " + self.message) //self.message has the new value ("Deleted"), but nothing changed on view.html 
        } 
       }, 
       "Confirm Delete", 
       ["Delete", "Cancel"] 
      ); 
     } 
    }); 

И HTML выглядит следующим образом:

<div class="page-wrapper"> 
    <rl-top-bar [title]="title" [top_bar_left]="top_bar_left" (topBarLeftClick)="topBarLeftClick()" ></rl-top-bar> 
    <div class="about-info-wrapper"> 
     <input type="text" [(ngModel)]="other_model" id="itemtoclick"/> 
     {{message}} 
     <div (click)="changeMessage()">click here</div> 
    </div> 
</div> 

{{message}} не обновляется, когда обратный вызов navigator.notification.confirm называется, но она обновляется, если Я нажимаю, например, на поле input, которое связано с угловой моделью

Один взлом, который я нашел, это работа чтобы щелкнуть что-то из javascript при вызове callback. Например: window.document.getElementById('itemtoclick').click()

Я стараюсь добавить .bind(this) в navigator.notification.confirm(...), но это ошибка бросания.

Я пытаюсь сэкономить this переменной перед вызовом navigator.notification.confirm, но такой же результат.

Тот же результат, если I .bind(this) для метода обратного вызова.

Как-то у меня есть ссылка на этот внутренний обратный вызов, потому что я могу читать и обновлять, но angular2 не знает, что я внес изменения, чтобы обновить представление.

Также эта проблема возникает только на мобильных устройствах, если я пытаюсь запустить браузер (хром), он работает нормально. Я использую сборку phonegap для создания файла .apk для Android. Но проблема также видна, если я использую мобильное приложение Phonegap для тестирования в реальном времени.

Я хочу знать, есть ли решение, которое не будет включать такой взлом.

Редактировать

Это мое первое приложение PhoneGap

для Android Я использую PhoneGap построить

Для прошивкой я использую PhoneGap CLI

Проблема в обоих Android и IOS.

Редактировать 1 Апрель 2016

Я создал видео, чтобы лучше описать проблему: See here

Также я изменить не используя this для onDeviceReady и проблема все еще здесь. Вот мой главный.JS код:

var phonegapApp = { 
    initialize: function() { 
     phonegapApp.bindEvents(); 
    }, 
    bindEvents: function() { 
     document.addEventListener('deviceready', phonegapApp.onDeviceReady, false); 
    }, 
    onDeviceReady: function() { 
     console.log("phonegapApp onDeviceReady"); 
     ng.platform.browser.bootstrap(AppComponent,[ 
      ng.http.HTTP_PROVIDERS, 
      ng.router.ROUTER_PROVIDERS, 
      new ng.core.Provider(ng.router.LocationStrategy, {useClass: ng.router.HashLocationStrategy}) 
     ]); 
    } 
}; 

И от index.html я называю phonegapApp.initialize(); в нижней части моего body.

Answer 1

Вы можете попробовать использовать функцию стрелки, чтобы иметь возможность использовать лексическое это:

this.message = "Test"; 
navigator.notification.confirm(
    "Delete this?", 
    (buttonIndex) => { 
    if(buttonIndex == 1) { //1 = Ok 
     this.message = "Deleted"; 
    } 
    }, 
    "Confirm Delete", 
    ["Delete", "Cancel"] 
); 

Смотрите эту ссылку для более намеков лексического это функции стрелок:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

Редактировать

Если вы используете ES5, вы можете попробовать:

this.message = "Test"; 
var self = this; 
navigator.notification.confirm(
    "Delete this?", 
    function(buttonIndex) { 
    if(buttonIndex == 1) { //1 = Ok 
     self.message = "Deleted"; 
    } 
    }, 
    "Confirm Delete", 
    ["Delete", "Cancel"] 
);