Angular 2 items don't update when changed from phonegap notification dialog

问题

I am building an phonegap app with angular2. I want to show a confirmation dialog and in success callback to update elements from angular2 view. When I do this nothing happens right away, but if I update other model on the page (what is linked with angular) my update is updated.

For confirmation dialog I use phonegap plugin: cordova-plugin-dialogs and the method called is: navigator.notification.confirm(...).

Here is my full code of my Component:

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"]
            );
        }
    });

And the html looks like this:

<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}} is not updating when the callback of navigator.notification.confirm is called, but it's updated if I click for example on input box which is linked to an angular model

One hack that I found that is working is to click something from javascript when callback is called. Like this: window.document.getElementById('itemtoclick').click()

I try to add .bind(this) to navigator.notification.confirm(...) but it's throwing error.

I try to save this to a variable before calling navigator.notification.confirm but same result.

Same result if I .bind(this) to callback method.

Somehow I have reference to this inside callback because I can read and update, but angular2 doesn't know that I made a change to update the view.

Also this problem is only on mobile, if I try to run on browser (chrome) it's working ok. I use phonegap build to create the .apk file for android. But the problem is also visible if I use Phonegap mobile app for live testing.

I want to know if there is a solution that will not involve a hack like this.

Edit

This is my first phonegap app

For Android I am using phonegap build

For iOS I am using phonegap CLI

The problem is in both Android and iOS.

Edit 1 Apr 2016

I created a video to better describe the problem: See here

Also I change to not using this for onDeviceReady and the problem is still here. Here is my main.js code:

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})
        ]);
    }
};

And from index.html I call phonegapApp.initialize(); at the bottom of my body.

回答1:

You could try to use an arrow function to be able to use lexical this:

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

See this link for more hints about the lexical this of arrow functions:

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

Edit

If you use ES5, you could try:

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"]
);

来源：https://stackoverflow.com/questions/36200111/angular-2-items-dont-update-when-changed-from-phonegap-notification-dialog