AngularJS: Загрузка подключаемого объекта внутри Service/Controller

Это касается загрузки плагинов браузера из моего углового веб-приложения.
У меня есть веб-приложение на основе jquery. Теперь я переписываю некоторые порции (в основном, передние), используя Angular framework.
У меня возникла проблема с загрузкой моего настраиваемого подключаемого модуля для браузера в моем приложении. Раньше, в приложении JQuery, я использовал document.getElementById(#objectId) для установки объекта подключаемого модуля, который объявлен в основном файле HTML. Он работал хорошо.
Но, в угловом, я не могу найти правильный способ загрузить объект плагина.AngularJS: Загрузка подключаемого объекта внутри Service/Controller

Может ли кто-нибудь дать некоторые указатели для достижения этого?

Вот мой плагин объявлении объекта в HTML:

<div id="pluginContainer" style="display: none;"> 
    <object id="myPlugIn" type="application/x-myPluginType" width="0px" height="0px"> 
     <param name="onload" value="pluginLoaded" /> 
    </object> 
</div>

В Jquery основе приложения:

var pluginObject = document.getElementById('myPlugin');

Спасибо, BMS

источник

2013-09-26 bms

Вы можете использовать угловую-х jQLite для выбора Элемент DOM.

Вы можете использовать их,

$scope.pluginObject = angular.element(document.querySelector('#myPlugin'));

См документ here.

Демо-версия here.

источник

2013-09-26 06:34:21 devo

Спасибо Devo. Не могли бы вы помочь мне установить прослушиватели событий для объекта плагина. – bms

Вы можете создать крошечный directive и получить элемент от него. AngularJS делает его очень простым. Я создал директиву plugin-object. Пожалуйста, взгляните на приведенный ниже код.

Рабочая Plunkr здесь (http://plnkr.co/edit/ji5hT95vcDIuwpEcJlVe?p=preview)

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>myApp</title> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

    <script> 

    var myApp = angular.module('myApp', []); 


    myApp.directive('pluginObject', [function ($document) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 

     var pluginElement = element; 

     var pluginContainer = angular.element('#pluginContainer'); 

     var justTest = $('#t1'); 


     pluginElement.bind('click', function(event){ 
      console.log(event.target); 
     }); 

     pluginContainer.bind('click', function(event){ 
      console.log(event.target); 
     }); 

     justTest.bind('click', function(event){ 
      console.log(event.target); 
     }); 


     } 
    }; 
    }]) 

    </script> 

    <style> 
    #t1 { border: 2px solid gray; background-color: #f00; } 
    #myPlugIn { height: 100px; width: 100px;} 
    #pluginContainer { border: 2px solid gray; background-color: blue; width: 200px; margin: 0 auto;} 
    </style> 

</head> 
<body ng-app="myApp"> 

    <div id="pluginContainer"> 
     <object id="myPlugIn" plugin-object type="application/x-myPluginType"> 
      <param name="onload" value="pluginLoaded" /> 
     </object> 
    </div> 

    <div id="t1">TEST</div> 

</body> 
</html>

Вы можете даже использовать JQuery внутри директивы, как обычно делают - см третий вариант pluginJQueryWay, но я бы не рекомендовал, что, как это на самом деле не надо - больше AngularJS вы думаете и меньше jQuery, это лучше. :)

Также убедитесь, что вы не пытаетесь создать экземпляр плагина или связать с ним события с controller - попробуйте сохранить любую DOM-манипуляцию внутри директивы (лучшая практика!).

Если вы правильно поняли, это упростит ваш HTML-код и послужит многоразовыми строительными блоками в вашем приложении, которые не зависят от каких-либо конкретных controller или $scope. Это красивая вещь;)

Если вы хотите связать какое-либо событие, вы можете использовать .bind - проверить код ниже с использованием pluginAngularWay2:

var pluginAngularWay2 = angular.element('#t1'); 

    pluginAngularWay2.bind('click', function(event){ 
     console.log(event.target); 
    });

Вы можете, конечно, связываются с другими событиями, а не только нажмите .bind('change', function(){...}) и так далее.

источник

2013-09-26 06:47:29

Спасибо, dluz.Я попытался добавить прослушиватель событий для подключаемых объектов (pluginAngularWay1, pluginAngularWay2, pluginJQueryWay). Но я получаю следующую ошибку. «Ошибка: pluginJQueryWay.addEventListener не является функцией». Не могли бы вы помочь мне справиться с этой ошибкой. Мой плагин будет генерировать некоторые события, как только он получит некоторые данные с сервера. Мое угловое веб-приложение должно поймать эти события. Благодарю. – bms

@bms Я обновил код выше. Посмотрите, работает ли это для вас. –

рабочий Plunkr здесь (http://plnkr.co/edit/5eK5dDrfaHLHGpophMRt?p=preview) –

AngularJS: Загрузка подключаемого объекта внутри Service/Controller

ответ

Смежные вопросы