2

我必须将带有回调函数的第三方 JavaScript 插件添加到 Angular JS 应用程序。

JavaScript 插件提供了这样的功能：

thirdPartyFunction(parameter1, parameter2, parameter3, callback);

在回调函数中，我得到插件计算的结果。

回调函数如下所示：

callback(resultobject)
{ ... }

我想在我的角度应用程序中显示结果。如何在 $scope 中获取结果对象？到目前为止，无法重写 JavaScript 插件。

我的想法是提供像这样的角度服务，但我应该如何实现该服务？：

app.factory('myservice', function () {

    function callback(resultobject) {
    ???
    }


    return {

        getResult: function(parameter1, parameter2, parameter3) {
        thirdPartyFunction(parameter1, parameter2, parameter3, callback);
            return ???;
        }

    };
});
4

3 回答 3

1

服务在这里可能无济于事。看看directives 这里的角度。根据插件在页面上的集成方式，您必须创建一个公开插件功能的指令。

指令创建自己的范围并可以广播\发出消息，这些消息可以引导到控制器，您可以在其中更新模型，插件回调并调用 $scope.apply() 然后刷新 UI

如果您可以直接在 Controller 中引用插件，那么在异步回调之后您唯一需要做的就是更新模型并调用 $scope.apply()

于 2013-03-09T11:31:18.170 回答
1

首先，感谢您的回复。现在，这是我的解决方案，如何在需要时调用函数“thirdPartyFunction”。只需更改范围内的变量。

app.directive('somePlugin', function() {
return {
  scope: true,
  link: function(scope, element, attrs) {

    function callback(resultObject) {
       scope.model.prop1 = resultObject.propx;
       scope.model.state = "waiting";
       scope.$apply();
    }

    scope.$watch('model.state', function(newValue, oldValue) {
            if (newValue == "request") {
               thirdPartyFunction(scope.model.parameter1, scope.model.parameter2,    
               scope.model.parameter3, callback);
            }
        });

  }
}
});
于 2013-03-11T12:23:13.547 回答
1

假设您的控制器有一些您希望插件最终更新的模型：

$scope.model = { prop1: 'plugin will update this value' };

正如@Chandermani 已经建议的那样，定义一个指令。在链接函数中，定义回调函数。当回调被调用时，由于我们创建了闭包，它将可以访问指令的scope.

就指令范围而言，您有相当多的自由。您可以使用与父级相同的范围（这是指令默认执行的操作）并直接更新scope.model.prop1. 您可以创建一个新范围 ( scope: true) 并且仍然可以scope.model.*通过原型继承访问。您可以创建一个隔离范围 ( scope: { ... }) 并使用 '=' 语法将属性绑定到父范围。

app.directive('somePlugin', function() {
   return {
     scope: true,
     link: function(scope, element, attrs) {
        // define the callback here
        function callback(resultObject) {
           scope.model.prop1 = resultObject.propx;
           scope.$apply();  // let Angular know about the change we just made
        }
        // initialize the plugin here
        thirdPartyFunction(parameter1, parameter2, parameter3, callback);
        // do other directive stuff here
        // ...
     }
   }
});
于 2013-03-09T15:18:27.233 回答