重叠角度应用程序/用角度构建第三方小部件

Question

I'm building a third party widget that will be loaded onto multiple sites. 我正在构建一个第三方小部件，它将被加载到多个站点上。 I'm using angular for implementation, with a build script that wraps my angular so it doesn't interfere with any other angular that might be used on the page. 我正在使用angular进行实现，并使用了一个包装我的angular的构建脚本，因此它不会干扰页面上可能使用的任何其他angular。

Everything works fine when I use my own custom directives, but when I tried to incorporate a loading indicator, using ng-show , it "sometimes" didn't work. 当我使用自己的自定义指令时，一切工作正常，但是当我尝试使用ng-show合并加载指示符时，“有时”不起作用。 I tracked the "sometimes" down to "on pages that already use angular". 我将“有时”跟踪到“在已经使用angular的页面上”。

It seems that the page's angular is still data binding my templates when they are inserted into the page. 当将模板插入页面时，页面的角度似乎仍与数据绑定。 Is there any way I can make my dom a no-go zone for the page's angular? 有什么办法可以使我的dom成为页面角度的禁止进入区域？

ng-non-bindable seemed like it might work, but if I use that, I can't bootstrap underneath it. ng-non-bindable似乎可行，但是如果我使用它，则无法在其下面进行引导。

Answer 1

What you need to do is to bootstrap angular programatically instead of using a tag. 您需要做的是以编程方式引导角度，而不是使用标签。

    <html>
    <body>
      // other parts of your site
      <div></div>



      // your angular stuff
      <div id='app' ng-controller="MyController">
        Hello {{greetMe}}!
      </div>
    </body>
    </html>



        // your controller
        angular.module('myApp', [])
          .controller('MyController', ['$scope', function ($scope) {
            $scope.greetMe = 'World';
          }]);

        // bootstrap angular programatically/manually
        angular.element('#id').ready(function() {
          angular.bootstrap(angular.element('#id'), ['myApp']);
        });

Without forgetting to use ng-non-bindable too on parts that u don't want to bind ofcoz 别忘了在不想绑定ofcoz的零件上也使用ng-non-bindable

Answer 2

So, here is what I have done, which is an abomination. 所以，这就是我所做的，这真是可恶。 I would much prefer a clean answer , but this protects my dom from the other angular instance. 我更希望得到一个干净的答案 ，但这可以保护我的dom免受其他角度攻击。

First, I wrap my entire dom element with ng-non-bindable . 首先，我用ng-non-bindable包裹了整个dom元素。 This keeps the page-level angular from interfering with it. 这样可以防止页面级角度受到干扰。

Then, I add the following, adapted from AngularJS - how to override directive ngClick 然后，我添加以下内容，改编自AngularJS-如何覆盖指令ngClick

var root = angular.module('rootModule', []);
root.config(function($provide){
    $provide.decorator('ngNonBindableDirective',
        ['$delegate', function($delegate){
            $delegate.shift();
            return $delegate;
        }]);
});

This removes the implementation of ng-non-bindable inside my angular instance. 这消除了我的角度实例内部的ng-non-bindable的实现。 So the page angular will ignore the dom, but my angular won't ignore it. 因此页面角度将忽略dom，但我的角度不会忽略它。 I just hope I don't have to implement ng-non-bindable-really later down the line. 我只是希望我以后不必再执行ng-non-bindable-really 。

Someone please save me from this horror by giving me a clean answer! 请有人给我一个明确的答案，使我免于这种恐惧！

重叠角度应用程序/用角度构建第三方小部件

问题描述

2 个解决方案

解决方案1
0 2014-10-14 13:14:56

解决方案2
0 2014-10-14 13:48:00

重叠角度应用程序/用角度构建第三方小部件

问题描述

2 个解决方案

解决方案1 0 2014-10-14 13:14:56

解决方案2 0 2014-10-14 13:48:00

解决方案1
0 2014-10-14 13:14:56

解决方案2
0 2014-10-14 13:48:00