Javascript 重叠angular应用程序/使用angular构建第三方小部件
我正在构建一个第三方小部件，它将被加载到多个站点上。我使用angular进行实现，使用一个构建脚本包装我的angular，这样它就不会干扰页面上可能使用的任何其他angular 当我使用自己的自定义指令时，一切都很好，但当我尝试使用ng show合并加载指示器时，它有时不起作用。我有时会在已经使用angular的页面上跟踪到 当模板插入页面时，页面的角度似乎仍然是绑定我的模板的数据。有没有什么方法可以让我的dom成为页面角度的禁区Javascript 重叠angular应用程序/使用angular构建第三方小部件,javascript,angularjs,Javascript,Angularjs,我正在构建一个第三方小部件，它将被加载到多个站点上。我使用angular进行实现，使用一个构建脚本包装我的angular，这样它就不会干扰页面上可能使用的任何其他angular 当我使用自己的自定义指令时，一切都很好，但当我尝试使用ng show合并加载指示器时，它有时不起作用。我有时会在已经使用angular的页面上跟踪到 当模板插入页面时，页面的角度似乎仍然是绑定我的模板的数据。有没有什么方法可以让我的dom成为页面角度的禁区 ng non-bindable似乎可以工作，但如果我使用它，就无
ng non-bindable似乎可以工作，但如果我使用它，就无法在它下面引导。您需要做的是以编程方式引导angular，而不是使用标记
<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']);
});
不要忘了在你不想绑定Ofcz的部分也使用ng non bindable，所以，下面是我所做的，这是一件令人憎恶的事情。我更希望有一个清晰的答案，但这可以保护我的dom不受其他角度实例的影响 首先，我用ng non-bindable包装我的整个dom元素。这样可以保持页面级别的角度不受干扰 然后，我添加以下内容，改编自 这将在我的angular实例中删除ng non bindable的实现。因此，页面angular将忽略dom，但我的angular不会忽略它。我只是希望以后不必实现ng non bindable
有人请给我一个干净的回答，把我从这场恐怖中解救出来 我没有确凿的证据证明这一点，但我强烈建议不要将Angular与您的图书馆捆绑在一起。Angular喜欢控制页面，因此如果Angular已经加载，我希望会发生有趣的事情，例如，两次初始化您的Angular和页面的Angular。此外，Angular的大小也不容忽视；如果您真的必须将它与您的库捆绑在一起，那么可以尝试使用自定义构建来删除您不需要的内容。可能有两个版本，一个是为非角度用户捆绑的Angular，另一个是为已经使用Angular的用户捆绑的Angular模块。问题是，如果我背着页面的Angular，我不知道它是什么版本。我需要我的小部件，它确实比小部件大得多，即使它们更改了angular版本，或者是angular 1.0或其他旧版本。当然，你是对的。但我还是有一种不好的预感，那就是在图书馆里打包。就像他们说的，只有我的2美分。。。就我个人而言，我更愿意要求一个最小角度的版本。如果你能在iframe中运行它，我会从图片中删除冲突。我已经在手动引导了。问题是外部应用程序仍然绑定到内部应用程序的指令。
var root = angular.module('rootModule', []);
root.config(function($provide){
$provide.decorator('ngNonBindableDirective',
['$delegate', function($delegate){
$delegate.shift();
return $delegate;
}]);
});