Angular – 通过不同的帧附加html,每帧一个模块

发布时间：2020-12-17 07:58:00 所属栏目：安全来源：网络整理

导读：我的代码有主要的windonw和一个iframe,每个都有你的模块.主窗口中的一个按钮触发应该将html附加到iframe中的click事件,附加到其中的新html应该正确应用拦截器和指令,但它不起作用！ Angular javascript： angular.module('module1',[]).controller('Controll

我的代码有主要的windonw和一个iframe,每个都有你的模块.主窗口中的一个按钮触发应该将html附加到iframe中的click事件,附加到其中的新html应该正确应用拦截器和指令,但它不起作用！
Angular javascript：

angular.module('module1',[]).controller('Controller1',function ($scope) {
  $scope.get = function(){
    $http.jsonp("some_url_here").success(function(html){
      $scope.content = html;
    });
  }
}).directive('click',function($compile) {
  return {
    link: function link(scope,element,attrs) {
      element.bind('click',function(){
        var unbind = scope.$watch(scope.content,function() {
        var div=document.getElementById("frame").contentWindow.angular.element("divId");
        div.append($compile(scope.content)(div.scope()));

          unbind();
        });
      });
    }
  }
});


angular.module('module2',[]).directive('a',function() {
  return {
    restrict:'E',link: function(scope,attrs) {
      console.log('ping!');
      console.log(attrs.href);
    }
 };
});

Html代码：

<html ng-app="modile1">
  <div ng-controller="Controller1">
    <button type="button",ng-click="get('any_value')",click:""/> Load frame
  </div>

  <iframe id="frame" src="/please/ignore/this">
   <!-- considere the html as appended from iframe-src and contains ng-app="module2" -->
   <html ng-app="module2">
     <div id="divId">
      <!-- code should be inject here -->
     </div>
   </html>
  </iframe>
</html>

请考虑angularjs,jquery(如果适用),模块声明以及标题是否正确加载.

我想将主框架/窗口中的html内容加载到iframe中并正确运行拦截器和指令.可能吗？如果是,我该怎么办？

谢谢你的进步！

我试过这个代码,看起来工作正常！我在这里找到了： http://www.snip2code.com/Snippet/50430/Angular-Bootstrap

var $rootElement = angular.element(document.getElementById("frame").contentWindow.document);
var modules = [
  'ng','module2',function($provide) {
    $provide.value('$rootElement',$rootElement)
  }
];

var $injector = angular.injector(modules);

var $compile = $injector.get('$compile');

$rootElement.find("div#divId").append(scope.content);

var compositeLinkFn = $compile($rootElement);

var $rootScope = $injector.get('$rootScope');
compositeLinkFn($rootScope);

$rootScope.$apply();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!