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：在服务/控制器中加载插件对象

回答

相关问题