โทร AngularJS จากรหัสเดิม

ฉันใช้ AngularJS เพื่อสร้างตัวควบคุม HTML ที่โต้ตอบกับแอปพลิเคชัน Flex แบบดั้งเดิม การเรียกกลับทั้งหมดจากแอพ 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>)

ขอบคุณ!

การทำงานร่วมกันจากด้านนอกของเชิงมุมถึงเชิงมุมเหมือนกับการดีบักแอปพลิเคชันเชิงมุมหรือการรวมเข้ากับห้องสมุดบุคคลที่สาม

สำหรับองค์ประกอบ 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.
});

Misko ให้คำตอบที่ถูกต้อง (ชัด) แต่พวกเรามือใหม่บางคนอาจต้องการความเรียบง่ายเพิ่มเติม

เมื่อเรียกรหัส AngularJS จากภายในแอปรุ่นเก่าให้นึกถึงรหัส AngularJS ว่าเป็น "ไมโครแอป" ที่มีอยู่ในที่เก็บที่มีการป้องกันในแอปพลิเคชันรุ่นเก่าของคุณ คุณไม่สามารถโทรได้โดยตรง (ด้วยเหตุผลที่ดีมาก) แต่คุณสามารถโทรจากระยะไกลผ่านทางวัตถุ $ scope

ในการใช้ออบเจ็กต์ $ scope คุณต้องได้รับการจัดการของ $ scope โชคดีที่มันง่ายมากที่จะทำ

คุณสามารถใช้รหัสขององค์ประกอบ HTML ใด ๆ ภายใน AngularJS "micro-app" HTML ของคุณเพื่อรับขอบเขตของแอพ AngularJS $ $

ตัวอย่างเช่นสมมติว่าเราต้องการเรียกฟังก์ชั่นสองสามอย่างภายในคอนโทรลเลอร์ AngularJS ของเราเช่น sayHi () และ sayBye () ใน AngularJS HTML (ดู) เรามี div ที่มี id "MySuperAwesomeApp" คุณสามารถใช้รหัสต่อไปนี้รวมกับ 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;
    });
};

วิธีที่ปลอดภัยและมีประสิทธิภาพยิ่งขึ้นโดยเฉพาะอย่างยิ่งเมื่อปิดการแก้ไขข้อมูลคือใช้ตัวแปรที่แชร์เพื่อเก็บฟังก์ชั่นการโทรกลับ คอนโทรลเลอร์เชิงมุมของคุณใช้ฟังก์ชั่นนี้เพื่อส่งกลับ internals ไปยังรหัสภายนอก

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>

โปรดทราบว่าฉันยังไม่ได้ทดสอบ on ('scopeDestroyed') เมื่อองค์ประกอบที่แท้จริงถูกลบออกจาก DOM ถ้ามันไม่ทำงานการทริกเกอร์เหตุการณ์บนเอกสารแทนองค์ประกอบอาจช่วยได้ (ดูที่ app.js) สคริปต์ในโปรแกรมสาธิตพลั่ว

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันดูตัวเลือกในการทำเช่นนี้เมื่อเร็ว ๆ นี้ดังนั้นฉันคิดว่าฉันใส่สิ่งที่ฉันค้นพบที่นี่ในกรณีที่เป็นประโยชน์กับทุกคน

ในกรณีส่วนใหญ่หากจำเป็นต้องใช้รหัสดั้งเดิมภายนอกเพื่อโต้ตอบกับสถานะของ UI หรือการทำงานภายในของแอปพลิเคชันบริการอาจมีประโยชน์ในการแยกการเปลี่ยนแปลงเหล่านั้นออก หากรหัสภายนอกมีการโต้ตอบโดยตรงกับตัวควบคุมเชิงมุมส่วนประกอบหรือคำสั่งของคุณคุณกำลังเชื่อมโยงแอปของคุณอย่างหนักกับรหัสดั้งเดิมซึ่งเป็นข่าวร้าย

สิ่งที่ฉันใช้ในกรณีของฉันคือการรวมกันของ globals สามารถเข้าถึงเบราว์เซอร์ (เช่นหน้าต่าง) และการจัดการเหตุการณ์ รหัสของฉันมีเอ็นจิ้นการสร้างแบบฟอร์มอัจฉริยะซึ่งต้องการเอาต์พุต JSON จาก CMS เพื่อเริ่มต้นฟอร์ม นี่คือสิ่งที่ฉันได้ทำ:

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

บริการ Schema แบบฟอร์มถูกสร้างขึ้นโดยใช้หัวฉีดเชิงมุมตามที่คาดไว้:

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

และในตัวควบคุมของฉัน: function () {'ใช้เข้มงวด';

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

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

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

จนถึงตอนนี้นี่คือการเขียนโปรแกรมเชิงบริการเชิงบริสุทธิ์และเชิงจาวาสคริปต์ แต่การรวมมรดกมาที่นี่:

<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(); อาจทำให้แอพแตกถ้าเราเปลี่ยนขอบเขต แต่ถ้าแอพของคุณมีความรู้เกี่ยวกับการกำหนดขอบเขตและสามารถพึ่งพามันได้ไม่เปลี่ยนแปลงบ่อยครั้งสิ่งที่แนะนำก่อนหน้านี้คือวิธีการปฏิบัติ

หวังว่านี่จะช่วยได้ ข้อเสนอแนะใด ๆ ก็ยินดีต้อนรับ