注入动态html似乎没有编译

Question

注入动态html似乎没有编译

我正在尝试使用angularJS解决一个主要问题,即使用包含动态添加的html ng-controller.

让我们说我想在DOM中添加一个div ng-controller,它将它的绑定数据脱离显示.我可以成功实现如下:

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

Run Code Online (Sandbox Code Playgroud)

按预期输出以下内容:

{ "测试1": "一个", "TEST2": "2"}

但是,现在可以说div实际上必须动态加载,也许当用户按下按钮时.在这种情况下,我将使用以下内容替换上例中的标记:

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

Run Code Online (Sandbox Code Playgroud)

单击按钮时输出以下内容:

点击添加Div!
{{演示}}

到目前为止,这是有道理的; angular已经通过DOM工作了,完成了它,并完成了.它没有被告知有关新内容的添加.因此,如果我们查看AngularJS手册,就在本页底部,我们会发现如何告诉它我们刚刚添加了一些内容:

有时您希望从Angular外部访问当前运行的Angular应用程序的注入器.也许,您希望在应用程序引导后注入并编译一些标记.您可以使用添加到JQuery/jqLite元素的额外进样器()来完成此操作.请参见angular.element.

这种情况相当罕见,但如果第三方库注入了标记,则可能就是这种情况.

在下面的示例中,包含ng-controller指令的新HTML块由JQuery添加到文档正文的末尾.然后我们编译并将其链接到当前的AngularJS范围.var $ div = $('{{content.label}}'); $(document.body的).append($ DIV);
angular.element(document).injector().invoke(function($compile) {
  var scope = angular.element($div).scope();
  $compile($div)(scope);
});
Run Code Online (Sandbox Code Playgroud)

所以......考虑到这一点,我们addDiv()在我们的例子中更新函数如下:

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

Run Code Online (Sandbox Code Playgroud)

现在,当我们运行它时,我们应该是金色的吗？
不,我们仍然得到以下内容:

点击添加Div!
{{演示}}

你能指出我做错了什么,因为谷歌搜索和阅读手册没有结束,因为一切似乎都表明我的代码是正确的!

Answer 1

JB *_*zet 6

当从Angular 调用的函数调用时,您的代码将按原样运行. ng-click

由于您似乎真的想避免使用Angular,因此需要传统的onclick事件处理程序,因此需要将更改包装到以下调用中$scope.$apply():http://plnkr.co/edit/EeuXf7fEJsbBmMRRMi5n？p = preview

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	7494 次
最近记录：	7 年，9 月前