Question

我是一个有角度的初学者＆amp;试图在遗留应用程序中引入角度。页面结构如下所示

<html ng-app="demoApp">
    <div class="static-parent">
        <div class="dyanamic" ng-controller="SimpleController">
            <ul>
                <li ng-repeat="cust in customers">
                   {{cust.name}} - {{cust.city}}
                </li>
            </ul>
        </div>
    </div>
</html>

单击某个按钮时，“dyanamic”div将添加到dom中。

当动态添加此控制器div时，我尝试通过调用angular bootstrap来加载角度

angular.bootstrap(document,['demoApp']);

运行上述声明后，

在dom中创建了3个Li元素
但没有看到数据在网页上。 Li元素是空的

>> angular.element(".dynamic").scope().customers;

>> angular.element(".dynamic").scope().$apply();

你能告诉我哪里出错吗？在stackoverflow上尝试了其他答案，但似乎没有帮助。

控制器代码：

    //setting up controller
    var demoApp = angular.module("demoApp", []);
    var controllers = {};
    controllers.SimpleController = function($scope){
        $scope.customers = [{name:'dave', city:'auckland'},{name:'abe', city:'City2'}, {name:'ram', city:'City3'}];
    };
    demoApp.controller(controllers);

动态添加div的代码：

var template = Handlebars.compile( $("#template-content-content-container").html() );
$("static-parent").html(template(data));
angular.bootstrap('.page .row', ['demoApp']);

Angular版本：1.0.6

在1.2.28上，调用angular.bootstrap（document，['demoApp']）或angular.bootstrap（'。dynamic'，['demoApp']）;`

正在给予

错误：错误：btstrpd 应用程序已经使用此元素进行自举

以下是浏览器屏幕截图 -

enter image description here

Answer 1

请检查第三个（已接受的）答案：Angular bootstrapping after load of html （直接链接：Loading an AngularJS controller dynamically）

我认为，你必须＆＃34;编译＆＃34;任何东西，都是在第一个＆＃39; bootstrap＆＃39;之后添加的。调用

另外，我昨天做了这个小提琴来描述我的麻烦，我觉得它适合你。

http://jsfiddle.net/21neg0ox/

    var app = angular.module('app', []);

angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
});

//c1
app.controller('c1', ['$scope', '$compile', c1Fn]);
app.controller('c2', ['$scope', '$compile', c1Fn]);

function c1Fn($scope){
    $scope.isAlive = 'is alive';
}
setTimeout(wtf, 500);

function wtf(){
    var myLovelyHTML = '<div ng-controller="c2">c2 {{isAlive}}</div>';

    document.getElementById('c2-wrap').innerHTML = myLovelyHTML;    
}

动态引入的Angular控制器的数据绑定

1 个答案: