个人中心
gpt4 book ai didi

angularjs - 注入(inject)动态 html 似乎无法编译

转载 作者：行者123 更新时间：2023-12-04 17:17:28 25 4
gpt4 key购买 nike

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

假设我想向 DOM 添加一个 ng-controller 的 div ，这会脱口而出将数据绑定(bind)到显示器上。我可以成功地实现这一点，如下所示:

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

正如预期的那样，它输出以下内容:

{"test1":"one","test2":"two"}



但是，现在让我们说 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>

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

Click to add Div!
{{demo}}



到目前为止，这是有道理的； angular 已经通过 DOM 工作，完成了它的事情，并完成了。没有被告知要添加新内容。
所以，如果我们看一下 AngularJS 手册，就在 this page 的底部。 ，我们知道如何告诉它我们刚刚添加了一些东西:

Sometimes you want to get access to the injector of a currently running Angular app from outside Angular. Perhaps, you want to inject and compile some markup after the application has been bootstrapped. You can do this using the extra injector() added to JQuery/jqLite elements. See angular.element.

This is fairly rare but could be the case if a third party library is injecting the markup.

In the following example a new block of HTML containing a ng-controller directive is added to the end of the document body by JQuery. We then compile and link it into the current AngularJS scope. var $div = $('{{content.label}}'); $(document.body).append($div);

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


所以...考虑到这一点，我们更新了 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);
    });
}

现在当我们运行它时，我们应该是金色的吧？
不..我们仍然得到以下信息:

Click to add Div!
{{demo}}



sad panda is sad

你能指出我做错了什么吗，因为没有尽头的谷歌搜索和阅读手册会有所帮助，因为一切似乎都表明我的代码是正确的!

最佳答案

您的代码在 时按原样工作调用 来自从 调用的函数 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);
    });
});

关于angularjs - 注入(inject)动态 html 似乎无法编译，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33214459/

25 4 0
文章推荐： 从另一个数据框R中存在的一个数据框删除数据
文章推荐： elixir - 为什么值 rest 包含值 "llo"
文章推荐： fabricjs - 如何禁用文本框中文本的编辑，但仍然能够选择它。织物 1.6
文章推荐： r - match() 值与容差
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com