集成非 Angular 代码？答案

【问题标题】：Integrating non-Angular code?集成非 Angular 代码？
【发布时间】：2015-04-24 00:43:25
【问题描述】：

我正在开发一个 Cordova/PhoneGap 应用程序，并且我正在使用 $cordovaPush 插件（为 PushPlugin 包装）来处理推送通知。

代码如下所示：

var androidConfig = {
                    "senderID" : "mysenderID",
                    "ecb"      : "onNotification"
                }

                $cordovaPush.register(androidConfig).then(function(result) {
                    console.log('Cordova Push Reg Success');
                    console.log(result);            
                }, function(error) {
                    console.log('Cordova push reg error');
                    console.log(error);
                });

“ecb”函数必须定义窗口作用域，即：

window.onNotification = function onNotification(e)...

此函数处理传入事件。我显然想在我的 Angular 代码中处理传入事件 - 我如何整合这两者以便我的 onNotification 函数可以访问我的范围/rootScope 变量？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

通常，您会将您的第 3 方库包装在 service 或 factory 中，但本着回答您特定场景的精神...

这是一种可能性：

angular.module('myApp').
   controller('myController', function($scope, $window) {
     $window.onNotification = function() {
       $scope.apply(function() {
         $scope.myVar = ...updates...
       });
     };
   });

有几点需要注意：

尝试使用$window，而不是window。这是一个好习惯，因为它将帮助您提高可测试性。由于 Cordova 的内部结构，您实际上可能需要使用 window，但我对此表示怀疑。
完成所有工作的函数隐藏在$scope.apply 中。 如果您忘记执行此操作，那么您更新的任何变量都不会反映在视图中，直到摘要循环再次运行（如果有的话）。
虽然我将示例放在控制器中，但您也可以将示例放在处理程序中。如果它是一个角度处理程序（例如ng-click），你可能会认为因为ng-click 有一个隐含的 $apply 包装回调，你的onNotification 函数当时没有被调用，所以你仍然需要做$apply，如上。
...说真的...不要忘记申请。 :-) 当我调试人们的代码时，这是外部库无法正常工作的第一大原因。我们都至少被这个咬过一次。

【讨论】：

【解决方案2】：

在正文中定义一种邮件控制器，并在该控制器内部使用$window 服务。

HTML：

<body ng-controller="MainController">
     <!-- other markup .-->
</body>

JS：

yourApp.controller("BaseController", ["$scope", "$window", function($scope, $window) {

    $window.onNotification = function(e) {
        // Use $scope or any Angular stuff
    }
}]);

【讨论】：