如何从 Angular 控制器中的 Phonegap 插件访问值？

Question

我是 Angular 的新手，遇到了一些我希望很简单的事情。我需要使用此插件读取应用程序版本 (app version plugin)。我知道我需要读取运行处理程序中的版本，但我不知道如何将它放入我的控制器中以便我可以数据绑定到它。

到目前为止，这是我正确读取版本的代码：

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

我确定我只是遗漏了一些明显的东西。有什么想法吗？

谢谢，杰森

Answer 1

您可以使用文档中的值提供程序 here。

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

现在你有了一个名为 Application 的全局对象，它有很多属性。您可以将此对象注入您的控制器或服务中。

最终代码应如下所示：

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

更新:

由于您是在控制器中注入值提供程序，因此您可能会遇到缓存视图的情况，因此控制器只执行一次。

这里有两种选择。您可以禁用视图 caching:

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

使用 cache-view="false" 或在您的状态配置中进行设置。

另一种选择是使用视图 life-cycle，特别是 $ionicView.enter。

在您的控制器中，您可以添加以下几行：

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

每次进入视图时都会调用此事件。

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.

您可能需要稍微更改一下代码并使用 controller.version 而不是 controller.getVersion。

第三个是使用服务：

(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;
        }
    }

})();

现在您可以将 versionService 注入您的控制器或任何您需要的地方，并使用它的方法 setVersion 和 getVersion。

Answer 2

好的，在尝试了很多不同的方法之后，这就是我想出的方法。

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

其实很简单，只要在版本更新后使用 $scope.$apply 更新数据绑定即可。

Answer 3

我试过了，对我有用。在我的应用程序中，我想在应用程序页脚部分显示 应用程序版本。

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

这很简单，我们必须将版本设置代码放在 $timeout 中，然后就可以正常工作了。

如何从 Angular 控制器中的 Phonegap 插件访问值？

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

javascript

phonegap-plugins

angularjs

cordova

cordova-plugins