如何将带有回调函数的第三方Javascript插件添加到Angular JS应用程序中

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

JavaScript插件提供如下功能：

thirdPartyFunction(parameter1, parameter2, parameter3, callback);

callback(resultobject)
{ ... }

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

回调函数如下所示：

thirdPartyFunction(parameter1, parameter2, parameter3, callback);

callback(resultobject)
{ ... }

我想在角度应用程序中显示结果。如何获取$scope中的resultobject？目前还不可能重写JavaScript插件

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

app.factory（'myservice'，函数（）{
函数回调（resultobject）{
???
}
返回{
getResult:函数（参数1、参数2、参数3）{
第三方函数（参数1、参数2、参数3、回调）；
返回？？？；
}
};
});

这里的服务可能没有帮助。查看角度

指令

。根据插件在页面上的集成方式，您必须创建一个公开插件功能的指令

指令创建自己的作用域，并可以广播\发出消息，这些消息可以传送到控制器，在控制器中，您可以在插件回调时更新模型，并调用$scope.apply（），然后刷新UI

---

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

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

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

范围

你有相当大的自由度，与指令范围相适应。您可以使用与父级相同的作用域（默认情况下指令就是这样做的），并直接更新

scope.model.prop1

。您可以创建一个新的作用域（

scope:true

），并且仍然可以通过原型继承访问

scope.model.*

。您可以创建一个隔离作用域（

作用域：{…}

），并使用“=”语法将属性绑定到父作用域

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

---

首先，谢谢你的回复。现在，我的解决方案是如何调用 函数“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);
            }
        });

  }
}
});

---

仅供参考，默认情况下（即，

scope:false

）指令不会创建新的作用域。如果使用

scope:true

，将创建一个新的作用域（原型继承自父作用域）。如果使用

作用域：{…}

，将创建一个新的隔离作用域（不典型继承）。感谢您的回答，但指令只执行一次，还是不执行？它应该能够在加载DOM后多次执行函数“thirdPartyFunction”。您知道如何做到这一点吗？指令将用于连接事件处理程序，因此它们只需运行一次。基本上它只是Javascript，回调方法需要连接一次，并且每次有回调时都会得到调用。