181

AngularJS を使用して、従来の Flex アプリケーションとやり取りする HTML コントロールを構築しています。Flex アプリからのすべてのコールバックは、DOM ウィンドウにアタッチする必要があります。

たとえば（AS3で）

ExternalInterface.call("save", data);

電話します

window.save = function(data){
    // want to update a service 
    // or dispatch an event here...
}

JS のサイズ変更関数内から、コントローラーが聞くことができるイベントをディスパッチしたいと思います。サービスの作成が進むべき道のようです。AngularJS の外部からサービスを更新できますか? コントローラーはサービスからのイベントをリッスンできますか? ある実験 (フィドルをクリック)では、サービスにアクセスできるように見えますが、サービスのデータを更新してもビューに反映されません (この例では、<option>に追加する必要があります<select>)。

ありがとう！

4

7 に答える 7

296

angular の外部から angular への相互運用は、angular アプリケーションのデバッグまたはサードパーティ ライブラリとの統合と同じです。

任意の DOM 要素に対して、これを行うことができます。

  • angular.element(domElement).scope()要素の現在のスコープを取得する
  • angular.element(domElement).injector()現在のアプリ インジェクタを取得する
  • angular.element(domElement).controller()インスタンスを取得しng-controllerます。

インジェクターから、Angular アプリケーションの任意のサービスを取得できます。同様に、スコープから、公開されているメソッドを呼び出すことができます。

角度モデルへの変更またはスコープでのメソッド呼び出しは、次の$apply()ようにラップする必要があることに注意してください。

$scope.$apply(function(){
  // perform any model changes or method invocations here on angular app.
});
于 2012-05-09T01:29:49.563 に答える
86

Misko は (明らかに) 正しい答えを出しましたが、初心者の中にはさらに単純化する必要があるかもしれません。

レガシー アプリ内から AngularJS コードを呼び出す場合は、AngularJS コードを、レガシー アプリケーションの保護されたコンテナー内に存在する「マイクロ アプリ」と考えてください。これを直接呼び出すことはできませんが (非常に正当な理由により)、$scope オブジェクトを介してリモート呼び出しを行うことはできます。

$scope オブジェクトを使用するには、$scope のハンドルを取得する必要があります。幸いなことに、これは非常に簡単に行うことができます。

AngularJS の「マイクロアプリ」HTML 内の任意の HTML 要素の ID を使用して、AngularJS アプリ $scope のハンドルを取得できます。

例として、AngularJS コントローラー内で sayHi() や sayBye() などの関数をいくつか呼び出したいとします。AngularJS HTML (ビュー) には、id "MySuperAwesomeApp" の div があります。次のコードを jQuery と組み合わせて使用​​すると、$scope のハンドルを取得できます。

var microappscope = angular.element($("#MySuperAwesomeApp")).scope();

これで、スコープ ハンドルを介して AngularJS コード関数を呼び出すことができます。

// we are in legacy code land here...

microappscope.sayHi();

microappscope.sayBye();

より便利にするために、関数を使用して、アクセスしたいときにいつでもスコープ ハンドルを取得できます。

function microappscope(){

    return angular.element($("#MySuperAwesomeApp")).scope();

}

呼び出しは次のようになります。

microappscope().sayHi();

microappscope().sayBye();

ここで実際の例を見ることができます：

http://jsfiddle.net/peterdrinnan/2nPnB/16/

これは、Ottawa AngularJS グループのスライドショーでも示しました (最後の 2 つのスライドにスキップしてください)。

http://www.slideshare.net/peterdrinnan/angular-for-legacyapps

于 2013-07-21T05:03:46.013 に答える
24

私が見つけた概念の最大の説明はここにあります： https ：//groups.google.com/forum/#！msg / angle / kqFrwiysgpA / eB9mNbQzcHwJ

クリックを節約するには：

// get Angular scope from the known DOM element
e = document.getElementById('myAngularApp');
scope = angular.element(e).scope();
// update the model with a wrap in $apply(fn) which will refresh the view for us
scope.$apply(function() {
    scope.controllerMethod(val);
});
于 2013-03-09T19:34:58.440 に答える
13

前回の投稿のおかげで、モデルを非同期イベントで更新できます。

<div id="control-panel" ng-controller="Filters">
    <ul>
        <li ng-repeat="filter in filters">
        <button type="submit" value="" class="filter_btn">{{filter.name}}</button>
        </li>
    </ul>
</div>

私は自分のモデルを宣言します

function Filters($scope) {
    $scope.filters = [];
}

そして、スコープ外からモデルを更新します

ws.onmessage = function (evt) {
    dictt = JSON.parse(evt.data);
    angular.element(document.getElementById('control-panel')).scope().$apply(function(scope){
        scope.filters = dictt.filters;
    });
};
于 2013-01-30T10:15:14.357 に答える
13

さらに他の答えに。コントローラーのメソッドにアクセスしたくないが、サービスに直接アクセスしたい場合は、次のようにすることができます。

// Angular code* :
var myService = function(){
    this.my_number = 9;
}
angular.module('myApp').service('myService', myService);


// External Legacy Code:
var external_access_to_my_service = angular.element('body').injector().get('myService');
var my_number = external_access_to_my_service.my_number
于 2014-10-10T13:53:39.727 に答える