2

コールバック関数を備えたサードパーティのJavaScriptプラグインをAngularJSアプリケーションに追加する必要があります。

JavaScriptプラグインは、次のような関数を提供します。

thirdPartyFunction(parameter1, parameter2, parameter3, callback);

コールバック関数で、プラグインが計算した結果を取得します。

コールバック関数は次のようになります。

callback(resultobject)
{ ... }

Angularアプリケーションで結果を表示したいと思います。$ scopeでresultobjectを取得するにはどうすればよいですか？これまでのところ、JavaScriptプラグインを書き直すことはできません。

私の考えは、このような角度のあるサービスを提供することですが、どのようにサービスを実装する必要がありますか？：

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

    function callback(resultobject) {
    ???
    }


    return {

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

    };
});
4

3 に答える 3

1

サービスはここでは役に立たないかもしれません。angular directives hereを見てください。プラグインがページにどのように統合されているかに応じて、プラグイン機能を公開するディレクティブを作成する必要があります。

ディレクティブは独自のスコープを作成し、プラグイン コールバックでモデルを更新して UI を更新する $scope.apply() を呼び出すことができるコントローラーにチャネリングできるメッセージをブロードキャスト \ 発行できます。

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 に答える