13

我首先在 body 标记中使用 ng-app="myApp" 初始化我的应用程序,这适用于在第一页加载时加载的所有 angularized-html。

稍后我有一些代码将 angularized-html 加载到 DOM 中。

在 angular 1.08 中,我可以在加载后运行 angular.bootstrap($newLoadHTML, ["myApp"]) 并且它会起作用;其中 $newLoadHTML 是用 jQuery 抓取的新添加的 HTML。

在 Angular 1.2 中,这不再起作用:(

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

我收到了这个我理解的错误,但我不知道如何解决它。

我需要做的是加载angularized-html,然后让角度知道它。

这里有一个 plunker 来说明它:http ://plnkr.co/edit/AHMkqEO4T6LxJvjuiMeT?p=preview

4

4 回答 4

15

I will echo what others have mentioned: this kind of thing is generally a bad idea, but I also understand that you sometimes have to work with legacy code in ways you'd prefer not to. All that said, you can turn HTML loaded from outside Angular into Angular-bound views with the $compile service. Here's how you might rewrite your current example to make it work with $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');
});

Here is an example: http://plnkr.co/edit/mfuyRJFfA2CjIQBW4ikB?p=preview

It simplifies things a bit if you can build your functionality as a directive instead of using raw jQuery--you can inject the $compile and $rootScope services into it, or even use the local scope inside the directive. Even better if you can use dynamic binding into an <ng-include> element instead.

于 2013-10-20T03:31:28.560 回答
1

动态加载 AngularJS 控制器

这个问题的答案解决了我的问题。因为我需要在将内容添加到 DOM 后创建控制器。此修复程序要求我在声明后也注册控制器。如果有人有更简单的解决方案,请加入。

于 2013-10-23T22:27:23.533 回答
1

你的方法似乎不对。您以不恰当的方式一起使用 jQuery 和 Angular,可能会产生冲突。

Angular 内置的模板支持是最好的方法,要么使用 ng-include,要么你可以使用 Angular 的路由和 ng-view。文档在这里:

http://docs.angularjs.org/api/ng.directive:ngInclude

http://docs.angularjs.org/api/ngRoute.directive:ngView

最简单的方法是将 ng-include 设置为 url 字符串:

<div ng-include="'ajax.html'"></div>

如果您在执行某些操作时确实需要它动态加载,那么这对您来说是一个更完整的解决方案:

http://plnkr.co/edit/a9DVEQArS4yzirEQAK8c?p=preview

HTML:

<div ng-controller="InitCtrl">
    <p>{{ started }}</p> 
    <button ng-click="loadTemplate()">Load</button>
    <div class="content" ng-include="template"></div>
</div>

Javascript:

var myApp = angular.module('myApp', [])
.controller('InitCtrl', function($scope) 
{
    $scope.started = 'App is started';
    $scope.loadTemplate = function() {
      console.log('loading');
      $scope.template = "ajax.html";
    }
}).controller('AfterCtrl', function($scope) 
{
    $scope.loaded = 'Is now loaded';
});
于 2013-10-20T02:53:21.867 回答
0

导致此引导错误的另一个问题是 nginclude 或 ngview 场景,其中您的动态 html 包含对 angular js 的脚本引用。

我下面的 html 被注入到现有的 Angular 页面时导致了这个问题。对 angular.min.js 的引用导致 Angular 重新启动:

<div id="fuelux-wizard" class="row-fluid" data-target="#step-container">
    <ul class="wizard-steps">
       <li data-target="#step1">
            <span class="step">1</span>
            <span class="title">Submit</span>
        </li>    
        <li data-target="#step2">
            <span class="step">2</span>
            <span class="title">Approve</span>
        </li>    
        <li data-target="#step3">
            <span class="step">3</span>
            <span class="title">Complete</span>
        </li>
    </ul>
</div>

<script src="/Scripts/Angular/angular.min.js"></script>
<script type="text/javascript">    
    angular.element('#requestMaster').scope().styleDisplayURL();
</script>
于 2014-02-28T16:59:42.430 回答