How to access a value from a Phonegap plugin in an Angular controller?

问题

I'm new to Angular and getting stuck on something I hope is simple. I need to read the app version using this plugin (app version plugin). I know I need to read the version in the run handler but I can't figure out how to get it into my controller so I can data-bind to it.

Here's my code so far which reads the version properly:

var appVersion = "0.0.0";

var example = angular.module('surj', ['ionic'])
    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            cordova.getAppVersion.getVersionNumber(function (version) {
                appVersion = version;
            });
        });
    })

    .controller('TestCtrl', function() {
        var controller = this;

        //this.version = appVersion;
        this.getVersion = function() {
            return appVersion;
        }
    })

I'm sure I'm just missing something obvious. Any thoughts?

Thanks, Jason

回答1:

You can use a value provider as documented here.

.value('Application', 
    {
    version: "0.0.0",
    name: "Something"
    })

Now you have a global object called Application with a bunch of properties. You can inject this object in your controllers or services.

The final code should look like this:

var example = angular.module('surj', ['ionic'])

    .value('Application', 
        {
        version: "0.0.0",
        name = "Something"
        })

    .run(function ($ionicPlatform, Application) {
        $ionicPlatform.ready(function () {
            cordova.getAppVersion.getVersionNumber(function (version) {
                Application.version = version;
            });
        });
    })

    .controller('TestCtrl', function(Application) {
        var controller = this;

        //this.version = appVersion;
        this.getVersion = function() {
            return Application.version;
        }
    })

UPDATE:

Since you're injecting the value provider in the controller, you might face the situation where the views are cached so the controller is executed only once.

You have two options here. You can disable the view caching:

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

using cache-view="false" or setting it in your states configuration.

The other option is to use the views life-cycle and specifically $ionicView.enter.

In your controller you can add these few lines:

$scope.$on('$ionicView.enter', function() {
    controller.version = Application.version; 
});

This event is called every time you enter a view.

The view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view.

You might have to change your code a bit and use controller.version instead controller.getVersion.

The third was is to use a service:

(function() {
    'use strict';

    angular
        .module('starter.services', [])
        .factory('versionService', versionService);

    // versionService.$inject = ['$log'];

    /* @ngInject */
    function versionService() {

        var service = {
            version: "1.0.0",
            setVersion: setVersion,
            getVersion: getVersion
        };

        return (service);

        function setVersion(version) {
            this.version = version;
        }

        function getVersion() {
            return this.version;
        }
    }

})();

Now you can inject versionService in your controller or wherever you need it and use its methods setVersion and getVersion.

回答2:

Okay, after trying many different methods, here's what I came up with.

var example = angular.module('App', ['ionic'])
    .controller('AppCtrl', ['$scope', '$ionicPlatform', function($scope, $ionicPlatform) {
        var controller = this;

        // Properties
        controller.appVersion = "NA";

        // Methods
        controller.setVersion = function (version) {
            $scope.$apply(function() { controller.appVersion = version });  // Update the value and trigger the data-binding to refresh
        }

        // Init
        $ionicPlatform.ready(function () {
            cordova.getAppVersion.getVersionNumber(function (version) {
                controller.setVersion(version);
            });
        });
    }])

It's actually quite simple, you just use $scope.$apply to update the databinding once the version gets updated.

回答3:

I have tried and it's works for me. In my application, I want to display the App version in the app footer section.

angular.module('testApp', [])
.controller('MainCtrl', function($scope, $rootScope, $timeout) {
// Calling cordova plugin cordova-plugin-app-version
    cordova.getAppVersion.getVersionNumber().then(function (version) {
    $timeout(function() {
          $rootScope.app = {};
          $rootScope.app.version = version;
    }, 0);
});

This is very simple we have to put the version setting code inside the $timeout then it will work fine.

来源：https://stackoverflow.com/questions/31350842/how-to-access-a-value-from-a-phonegap-plugin-in-an-angular-controller