AngularJS：在服務/控制器中加載插件對象

這是關於從我的角度web應用程序加載的瀏覽器插件。
我有基於jQuery的Web應用程序。現在，我正在使用Angular框架重新編寫一些部分（主要是前端）。
我在我的應用程序中加載自定義瀏覽器插件時遇到問題。之前，在基於Jquery的應用程序中，我使用document.getElementById(#objectId)來實例化在主HTML文件中聲明的插件對象。它運作良好。
但是，在角度上，我無法找到正確的方式來加載插件對象。AngularJS：在服務/控制器中加載插件對象

有人可以提供一些指針來實現這個嗎？

這裏是我的插件對象申報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

謝謝德沃。你能幫我設置插件對象的事件監聽器嗎？ – 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不是函數」。你能幫我解決這個錯誤嗎？一旦從服務器獲取一些數據，我的插件就會拋出一些事件。我的角度web應用程序應該捕獲這些事件。謝謝。 – bms

@bms我更新了上面的代碼。看看是否適合你。 –

在這裏工作Plunkr（http://plnkr.co/edit/5eK5dDrfaHLHGpophMRt?p=preview） –

AngularJS：在服務/控制器中加載插件對象

回答

相關問題