Question

意识到要在我的项目中实现一些前端的东西，最好使用前端框架，而不仅仅是纯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);
}

问题是AngularJS <div ng-controller="Hello">在这里不起作用。无法得到原因，因为代码已成功添加到页面中。我还尝试添加click_btn()操作并在此操作上测试控制器调用，但仍然无效。

这是控制器的代码

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

页面很大，可以将其粘贴到此处，但它以<html ng-app="MainPage">开头，因此不应该出现问题。

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

控制器仅动态插入页面一次。如果再次进行function Content(i){}调用 - 将删除之前控制器的代码。

修改

找到一种方法将生成的控制器注入范围，从这里： http://geevcookie.com/2014/01/compile-dynamic-html-with-angularjs/

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

我在警报中得到[object] [Object] ...等。），但是页面内<li ng-repeat="element in content"> {{ element }} </li>因为未知原因而无法正常工作。我只是在HTML内容中获得了“{{element}}”。

生成AngularJS控制器用法

0 个答案: