AngularJS:在服务/控制器中加载插件对象

AngularJS: Loading plug-in object inside Service/Controller

本文关键字：加载 插件 对象 控制器 服务 AngularJS      更新时间：2023-09-26

这是关于从我的角度Web应用程序加载浏览器插件。
我有基于jquery的Web应用程序。现在，我正在使用Angular框架重写一些部分(主要是前端(。
我在应用程序中加载自定义浏览器插件时遇到问题。早些时候，在基于 Jquery 的应用程序中，我使用 document.getElementById(#objectId) 来嵌入在主 HTML 文件中声明的插件对象。它运作良好。
但是，在角度中，我无法找到加载插件对象的正确方法。

有人可以给出一些指示来实现这一点吗？

这是我在 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');

谢谢宝马系统

您可以使用

angular 的jQLite来选择一个 DOM 元素。

您可以使用这些，

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

请参阅此处的文档。

在这里演示。

您可以创建一个小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(){...})等等。

相关文章：