Javascript AngularJS：在服务/控制器内加载插件对象_Javascript_Jquery_Html_Angularjs

Javascript AngularJS：在服务/控制器内加载插件对象

javascript jquery html angularjs

Javascript AngularJS：在服务/控制器内加载插件对象,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,这是关于从我的angular web应用程序加载浏览器插件的问题。我有一个基于jquery的web应用程序。现在，我正在重新编写一些部分，主要是前端使用Angular框架。我在应用程序中加载自定义浏览器插件时遇到问题。前面，在基于Jquery的应用程序中，我使用document.getElementByIdobjectId实例化主HTML文件中声明的插件对象。它工作得很好。但是，在angular中，我无法找到加载插件对象的正确方法有人能给点建议来实现这一点吗以下是我的HTML插件对象声

这是关于从我的angular web应用程序加载浏览器插件的问题。我有一个基于jquery的web应用程序。现在，我正在重新编写一些部分，主要是前端使用Angular框架。我在应用程序中加载自定义浏览器插件时遇到问题。前面，在基于Jquery的应用程序中，我使用document.getElementByIdobjectId实例化主HTML文件中声明的插件对象。它工作得很好。但是，在angular中，我无法找到加载插件对象的正确方法

有人能给点建议来实现这一点吗

以下是我的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>

谢谢， BMS

您可以使用angular的jQLite选择DOM元素

你可以用这些

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

见医生

演示。

您可以创建一个小指令并从中获取元素。AngularJS使它变得非常简单。我已经创建了一个名为pluginobject的指令。请看下面的代码

在这里工作

当然，您可以绑定到其他事件，而不仅仅是单击

.bind'change'，函数{…}等等。

谢谢dluz。我尝试为插件对象PluginangularWay1、pluginAngularWay2、PluginQueryWay添加事件侦听器。但是，我得到了下面的错误。错误：PluginQueryway.addEventListener不是函数。你能帮我处理这个错误吗。我的插件从服务器获取数据后会抛出一些事件。我的angular web应用程序应该能够捕捉到这些事件。谢谢，谢谢，德沃。你能帮我设置插件对象的事件监听器吗。

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

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

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

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