Angularjs 注入动态html不会'；我好像没有编译_Angularjs

Angularjs 注入动态html不会'；我好像没有编译

angularjs

Angularjs 注入动态html不会'；我好像没有编译,angularjs,Angularjs,我试图解决angularJS在使用动态添加的html时遇到的一个主要问题，该html包含ng controller 假设我想在DOM中添加一个div，它是一个ng控制器，将绑定的数据脱口而出显示出来。我可以通过以下方式成功实现这一目标： <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/

我试图解决angularJS在使用动态添加的html时遇到的一个主要问题，该html包含

ng controller

假设我想在DOM中添加一个div，它是一个

ng控制器

，将绑定的数据脱口而出显示出来。我可以通过以下方式成功实现这一目标：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        var demoData = {
            'test1': 'one',
            'test2': 'two'
        };

        var myApp = angular.module('myApp', []);
        myApp.controller('TestCtrl', function ($scope) {
            $scope.demo = demoData;
        });
    </script>
</head>
<body>
    <div ng-controller="TestCtrl">
        {{demo}}
    </div>            
</body>
</html>

function addDiv() {
    var $newDiv = $('<div ng-controller="TestCtrl">{{demo}}</div>');
    $(document.body).append($newDiv);

    angular.element(document).injector().invoke(function ($compile) {
        var scope = angular.element($newDiv).scope();
        $compile($newDiv)(scope);
    });
}

所以。。。考虑到这一点，我们在示例中更新

addDiv（）

函数如下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        var demoData = {
            'test1': 'one',
            'test2': 'two'
        };

        var myApp = angular.module('myApp', []);
        myApp.controller('TestCtrl', function ($scope) {
            $scope.demo = demoData;
        });
    </script>
</head>
<body>
    <div ng-controller="TestCtrl">
        {{demo}}
    </div>            
</body>
</html>

function addDiv() {
    var $newDiv = $('<div ng-controller="TestCtrl">{{demo}}</div>');
    $(document.body).append($newDiv);

    angular.element(document).injector().invoke(function ($compile) {
        var scope = angular.element($newDiv).scope();
        $compile($newDiv)(scope);
    });
}

函数addDiv（）{
var$newDiv=$（'{{demo}}'）；
$（document.body）.append（$newDiv）；
angular.element（document）.injector（）.invoke（函数（$compile）{
var scope=angular.element（$newDiv.scope（）；
$compile（$newDiv）（范围）；
});
}

现在当我们运行它时，我们应该是金色的，对吗？
不。。我们仍然得到以下结果：

<body>
    <button onclick="addDiv();">Click to add Div!</button>
    <script>
        function addDiv() {
            var newDiv = $('<div ng-controller="TestCtrl">{{demo}}</div>');
            $(document.body).append(newDiv);
        }
    </script>
</body>

点击添加Div
{{demo}}

你能指出我做错了什么吗，因为谷歌搜索和阅读手册无穷无尽都是有帮助的，因为一切似乎都表明我的代码是对的

当变量为$newDiv时，是否尝试编译newDiv

编辑：我认为这是因为您使用的是注入器，并在角度控制器之外编译

我已经在设置了一个plunkr来演示这一点

该示例使用页面主体上的控制器：

app.controller('InitialController', function ($scope, $injector){
    $scope.newBtn = function () {
      var $newDiv = $('<div ng-controller="TestCtrl">{{demo}}</div>');

      $injector.invoke(function ($compile) {
          var div = $compile($newDiv);
          var content = div($scope);
          $(document.body).append(content);
      });
    };
});

第二个控制器负责与该内容相关的逻辑。

当从角度ng单击调用的函数调用时，您的代码将按原样工作由于您似乎确实希望避免使用Angular，因此希望使用传统的onclick 事件处理程序，因此需要将更改包装到对$scope.$apply（）的调用中：您所有的问题都来自这样一个事实，即您试图像使用jQuery一样使用AngularJS。您不应该使用AngularJS动态生成或加载HTML。您应该以JSON的形式加载数据。根据数据包含的内容，静态模板（使用ng show、ng if和其他指令）应该显示/隐藏页面的部分。页面之间的导航应使用路由器完成。在AngularJS应用程序中，addDiv（）函数不应添加div。它应向存储在作用域中的数组添加元素。显示此数组所有元素的ng repeat指令将检测新元素，并相应地刷新视图。我理解你的意思，但这对我没有帮助，因为我无法真正重新设计整个web应用程序以使用angular。我所要做的就是在一个更大的web应用程序中的几个动态加载页面中使用angular。如果你看一下参考的AngularJS手册，它确实说明了这应该是可能的？它会起作用的。只需在url上重复使用ng，ng就会在视图中包含每个url。如果要添加div，请在URL数组中添加URL。@JBNizet-抱歉-编辑了我之前的评论，以便更好地解释我面临的问题。请将此作为澄清问题添加到原始问题中，而不是作为答案。@Matt遗憾的是，没有。这只是问题中的一个输入错误，而不是我的代码。更新了问题以更正：）这不是我想避免使用Angular，而是我无法证明对现有产品的核心部分进行数周的编码和测试，然后实现可能需要半天时间编写的功能是合理的。$rootScope的包含是缺少的键。简单地加上这一点，一切都变得完美。谢谢你的回答和帮助。 angular.element(document).injector().invoke(function ($compile, $rootScope) { $rootScope.$apply(function() { var scope = angular.element($newDiv).scope(); $compile($newDiv)(scope); }); });