Javascript 动态引入角度控制器的数据绑定_Javascript_Jquery_Angularjs

Javascript 动态引入角度控制器的数据绑定

javascript jquery angularjs

Javascript 动态引入角度控制器的数据绑定,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我是一个angular初学者&试图在遗留应用程序中引入angular。页面结构如下所示 <html ng-app="demoApp"> <div class="static-parent"> <div class="dyanamic" ng-controller="SimpleController"> <ul> <li ng-repeat="cust in cus

我是一个angular初学者&试图在遗留应用程序中引入angular。页面结构如下所示

<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>

在运行上述语句之后

在dom中创建了3个li元素

但没有看到任何数据在网页上。Li元素是空的

用于动态添加div的代码：

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

角度版本：1.0.6

在1.2.28上，调用angular.bootstrap（文档，['demoApp']）或angular.bootstrap（'.dynamic'，['demoApp']）`

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

正在给予

错误：错误：btstrpd 应用程序已使用此元素引导

以下是浏览器屏幕截图-

请检查第三个（已接受）答案：（直接链接：）

我认为，您必须“编译”在第一次“引导”调用之后添加的任何内容

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

另外，我昨天做了这把小提琴来描述我的麻烦，我想它适合你的

var-app=angular.module（'app'，[]）；
angular.element（文档）.ready（函数（）{
引导（文档，['app']）；
angular.bootstrap(document,['demoApp']);
});
//c1
app.controller（'c1'，['$scope'，'$compile'，c1Fn]）；
app.controller（'c2'，['$scope'，'$compile'，c1Fn]）；
功能c1Fn（$scope）{
$scope.isAlive='is alive'；
}
设置超时（wtf，500）；
函数wtf（）{
var myLovelyHTML='c2{{{isAlive}}}'；
document.getElementById（'c2-wrap'）。innerHTML=myLovelyHTML；
}

这并不能回答您的问题，但您使用v1.0.6有什么原因吗？是否也可以包含控制器代码。@dcodesmith使用1.0.6没有具体原因。1.2.28给了我新的错误。你不能在两个位置引导angular应用程序。要么是

angular.bootstrap（文档，['demoApp']）

，要么是

，我不会同时调用它们。给这两个人中的任何一个打电话都会导致我感到惊讶的错误。因为它是刚刚添加的动态元素。事实上，我是在浏览器控制台上进行这些调用的。如果我在某个地方犯了错误，请纠正我，您可以为此创建一个JSFIDLE，包括单击事件。所以我们可以有一个更全面的观点。

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

    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;    
}