加载html后的角度引导

前端之家收集整理的这篇文章主要介绍了加载html后的角度引导前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我首先使用ng-app =“myApp”在body标签中初始化我的应用程序,这对于在第一页加载时加载的所有angularized-html都可以正常工作. @H_403_2@后来我有一些代码将angularized-html加载到DOM中.

@H_403_2@在角度1.08中,我可以在加载后运行angular.bootstrap($newLoadHTML,[“myApp”]),它将工作;其中$newLoadHTML是用jQuery抓取的新添加的HTML.

@H_403_2@在角度1.2这不再工作:(

@H_403_2@错误:[ng:btstrpd]应用已使用此元素引导“http://errors.angularjs.org/1.2.0-rc.2/ng/btstrpd?p0=%3Cdiv%20ng-controller%3D%22AfterCtrl%22%3E

@H_403_2@我得到这个我明白的错误,但我不知道如何解决它.

@H_403_2@我需要做的是加载angularized-html,然后使角度意识到它.

@H_403_2@这是一个说明的地方:http://plnkr.co/edit/AHMkqEO4T6LxJvjuiMeT?p=preview

解决方法

我会回应别人提到的内容:这种事情通常是一个坏主意,但我也明白,你有时不得不以不喜欢的方式使用旧代码.所有这一切,您可以将从Angular外部加载的HTML加载到 the $compile service的Angular-bound视图中.以下是您可以重写当前示例以使其与$compile一起工作的方式:
// We have to set up controllers ahead of time.
myApp.controller('AfterCtrl',function($scope)  {
  $scope.loaded = 'Is now loaded';
});

//loads html and afterwards creates a controller
$('button').on('click',function() {
  $.get('ajax.html',function(data) {

    // Get the $compile service from the app's injector
    var injector = $('[ng-app]').injector();
    var $compile = injector.get('$compile');

    // Compile the HTML into a linking function...
    var linkFn = $compile(data);
    // ...and link it to the scope we're interested in.
    // Here we'll use the $rootScope.
    var $rootScope = injector.get('$rootScope');
    var elem = linkFn($rootScope);
    $('.content').append(elem);

    // Now that the content has been compiled,linked,// and added to the DOM,we must trigger a digest cycle
    // on the scope we used in order to update bindings.
    $rootScope.$digest();

  },'html');
});
@H_403_2@这是一个例子:http://plnkr.co/edit/mfuyRJFfA2CjIQBW4ikB?p=preview

@H_403_2@如果您可以将功能构建为指令而不是使用原始的jQuery,那么可以简化事情 – 您可以向其中注入$compile和$rootScope服务,甚至可以在指令中使用本地范围.如果您可以将动态绑定用于< ng-include>元素代替

原文链接:https://www.f2er.com/html/229828.html

猜你在找的HTML相关文章