Javascript 生成的AngularJS控制器使用情况

意识到要在我的项目中实现一些前端功能，最好使用前端框架，而不仅仅是纯JS。选择AngularJS。 正在尝试实现和生成代码，并坚持使用它

我已经生成了这段html代码，并在某些操作中将其添加到页面内容中

function Content(i){
    var html =
        '<div ng-controller="Hello">'+
        '<button ng-click="click_btn()">Load Data!</button>'+
            '<div class="panel panel-default">'+
                '<div class="panel-heading">Items List</div>'+
                '<div class="col-sm-8">'+
                    '<ul>'+
                        '<li ng-repeat="element in content"> {{ element }} '</li>'+
                    '</ul>'+
                '</div>'+
            '</div>'+
        '</div>';

        var ul = document.getElementById('FullList');
        ul.insertAdjacentHTML('beforeend', html);
        AddElementAngular(contentString);
}

粘贴到这里的页面很大，但它以

开头，所以应该没有问题

我要检查插入的警报，代码是否正在运行。使用动态控制器加载-否。如果我只是直接在页面内容中插入控制器的代码-一切正常

控制器仅动态插入页面一次。如果再次进行

函数内容（i）{}

调用，则先前控制器的代码将被删除

编辑：

找到了将生成的控制器注入作用域的方法，如下所示：

但仍然不能正常工作。执行控制器中的代码(

---

我得到了[object][object]……等的警告。），但由于未知原因，

{{element}}

中的页面不起作用。我刚刚在HTML内容中得到了“{element}}”。

通过替换控制器div，您想要实现什么？我有一个肮脏的解决方案，但我真的很想找到“干净”的方式来做你想做的事。请记住，99%的时候，从JS移动HTML是个坏主意，可以用干净的角度来做。如果我可以用angular的方式来做这个函数

函数内容（i{}

，也可以。但是我需要在JS/Angular controller中生成一个html。太多了，无法解释我试图在这里为一个案例取得的成就。但是这个HTML生成应该在.js/angular控制器中完成。将会有很多充满活力的东西加入进来你试图通过替换控制器div来实现什么？’-抱歉，也许我描述的smth不够清楚，但我不是在替换它，我是在js中生成它并放入主体。在生成之前，主体中不存在任何控制器。实际上，这个案例看起来比我想象的更有价值。我会告诉你使用$compile服务。如果从外部（有时甚至内部）修改DOM添加指令，则需要对其进行解释。您可以使用$compile服务。但如果没有控制器，我不确定该怎么做。接下来的问题是，为什么不能将这个HTML直接添加到HTML中？（我很确定你需要一些角度路由或类似的东西。）因为我不能直接将其添加到html中，如果可以的话-我不会提出这个问题：）需要动态添加控制器。请注意，如果你不提供更多信息，我帮不了你。我不是在评判你在做什么，但我在试图理解你为什么要这么做，为你提供一个解决方案。我不需要知道你认为你可能需要什么，但你想实现什么。下一个：“为什么”不能直接添加到html中吗？

angular.module('MainPage', [])
    .controller('Hello', function($scope, $http) {
        alert('jijij');
        $scope.click_btn = function() {
            alert('fsdfsdfsd');
        }

        $http.get('/api/getlist?groupID=2').
            success(function(data) {
                $scope.content = data;
            });
    });

function AddElementAngular(html){
    var $div = $(html);
    $(document.body).append($div);

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

$http.get('/api/getlist?groupID=2').
    success(function(data) {
        alert(data);
        $scope.content = data;
    });