レガシーコードからAngularJSを呼び出す

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の外部からサービスを更新できますか？コントローラはサービスからのイベントをリッスンできますか？1つの実験（フィドルはクリック）で、サービスにアクセスできるように見えましたが、サービスのデータを更新してもビューに反映されません（例では、<option>をに追加する必要があります<select>）。

ありがとう！

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

DOM要素の場合、これを行うことができます：

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

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

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

$scope.$apply(function(){
  // perform any model changes or method invocations here on angular app.
});

ミスコは（明らかに）正しい答えを出しましたが、私たちの初心者の一部はそれをさらに簡略化する必要があるかもしれません。

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

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

AngularJS "micro-app" HTML内の任意のHTML要素のIDを使用して、AngularJSアプリ$ scopeのハンドルを取得できます。

例として、AngularJSコントローラー内でsayHi（）やsayBye（）などのいくつかの関数を呼び出したいとしましょう。AngularJS HTML（ビュー）には、「MySuperAwesomeApp」というIDの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

私が見つけた概念の最大の説明はここにあります：https : //groups.google.com/forum/#!msg / angular / 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);
}); 

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

// 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 

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

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

特にデバッグデータがオフの場合、より安全でパフォーマンスの高い方法は、共有変数を使用してコールバック関数を保持することです。角度コントローラーはこの関数を実装して、内部を外部コードに返します。

var sharedVar = {}
myModule.constant('mySharedVar', sharedVar)
mymodule.controller('MyCtrl', [ '$scope','mySharedVar', function( $scope, mySharedVar) {

var scopeToReturn = $scope;

$scope.$on('$destroy', function() {
        scopeToReturn = null;
    });

mySharedVar.accessScope = function() {
    return scopeToReturn;
}
}]);

再利用可能なディレクティブとして一般化：

同様に機能する 'exposeScope'ディレクティブを作成しましたが、使用法はより簡単です：

<div ng-controller="myController" expose-scope="aVariableNameForThisScope">
   <span expose-scope='anotherVariableNameForTheSameScope" />
</div>

これは、現在のスコープ（ディレクティブのリンク関数に指定されている）を、すべてのスコープのホルダーであるグローバルな「スコープ」オブジェクトに格納します。ディレクティブ属性に提供された値は、このグローバルオブジェクトのスコープのプロパティ名として使用されます。

こちらのデモをご覧ください。デモで示したように、スコープが保存され、グローバルな「スコープ」オブジェクトから削除されたときに、jQueryイベントをトリガーできます。

<script type="text/javascript" >
    $('div').on('scopeLinked', function(e, scopeName, scope, allScopes) {
      // access the scope variable or the given name or the global scopes object
    }.on('scopeDestroyed', function(e, scopeName, scope, allScopes) {
      // access the scope variable or the given name or the global scopes object
    }

</script>

実際の要素がDOMから削除されたとき、私はon（ 'scopeDestroyed'）をテストしていないことに注意してください。機能しない場合は、要素ではなくドキュメント自体でイベントをトリガーすると役立つ場合があります。（app.jsを参照）デモプランカーのスクリプト。

私はこれが古い質問であることを知っていますが、最近これを行うためのオプションを探していたので、誰かに役立つ場合に備えて、ここに私の調査結果を入れようと思いました。

ほとんどの場合、UIの状態またはアプリケーションの内部動作と対話する外部のレガシーコードが必要な場合、サービスはこれらの変更を抽象化するのに役立ちます。外部コードが角度コントローラー、コンポーネント、またはディレクティブと直接やり取りしている場合は、アプリをレガシーコードと強く結び付けています。これは悪いニュースです。

私の場合、最終的に使用したのは、ブラウザーでアクセス可能なグローバル（つまり、window）とイベント処理の組み合わせです。私のコードには、フォームを開始するためにCMSからのJSON出力を必要とするスマートフォーム生成エンジンがあります。これが私がやったことです：

function FormSchemaService(DOM) {
    var conf = DOM.conf;

    // This event is the point of integration from Legacy Code 
    DOM.addEventListener('register-schema', function (e) {

       registerSchema(DOM.conf); 
    }, false);

    // service logic continues ....

フォームスキーマサービスは、予想どおりに角度インジェクターを使用して作成されます。

angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])

そして私のコントローラーでは：function（）{'use strict';

angular.module('myApp').controller('MyController', MyController);

MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];

function MyController($scope, formSchemaService) {
    // using the already configured formSchemaService
    formSchemaService.buildForm(); 

これまでのところ、これは純粋な角度のあるJavaScriptサービス指向プログラミングです。しかし、レガシー統合はここにあります：

<script type="text/javascript">

   (function(app){
        var conf = app.conf = {
       'fields': {
          'field1: { // field configuration }
        }
     } ; 

     app.dispatchEvent(new Event('register-schema'));

 })(window);
</script>

明らかに、どのアプローチにもメリットとデメリットがあります。このアプローチの利点と使用法は、UIによって異なります。私のフォームスキーマとレガシーコードには角度スコープの制御と知識がないため、以前に提案されたアプローチは私の場合は機能しません。したがって、に基づいてアプリを構成angular.element('element-X').scope(); すると、スコープを変更するとアプリが壊れる可能性があります。しかし、もしあなたのアプリがスコープについての知識を持っていて、それが頻繁に変更されないことに依存できるなら、以前に提案されたことは実行可能なアプローチです。

お役に立てれば。フィードバックも歓迎します。