0

这是关于从我的 Angular 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');

谢谢， BMS

4

2 回答 2

0

您可以创建一个微小的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-26T06:47:29.587 回答
0

您可以使用 AngularjQLite来选择 DOM 元素。

你可以使用这些，

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

请参阅此处的文档。

演示在这里。

于 2013-09-26T06:34:21.193 回答