AngularJS компилировать динамический контент - PullRequest
Новая
       4

AngularJS компилировать динамический контент

0 голосов
/ 02 июля 2018

Рассмотрим следующую веб-страницу: 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Test</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="angular.js"></script>
<script>
    var myApp = angular.module('myApp',[]);
    function addDiv(){
    var div = "<script> \
        myApp.controller('myController', function ($scope) { \
            $scope.testDynamic = function(){ \
                alert('it works!'); \
            } \
        }); \
        <\/script> \
        <div ng-controller=\"testController\">{{\"TEST\"}}<button ng-click=\"testDynamic();\">Click Me!</button></div>";
        $("body").append(div);
        // How to use $compile here???
    }
</script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div>{{"AngularJS"}}</div>
<button onclick="addDiv();">addDiv</button>
</body>
</html>

Когда содержимое добавляется в тело, как я могу загрузить / скомпилировать часть angularjs? Я пытался использовать $ compile как: 

angular.element('body').injector().invoke(function ($compile, $rootScope) {
                            $rootScope.$apply(function() {
                                var scope = angular.element(div).scope();
                                $compile(div)(scope);
                            });
                        });

Но безуспешно. Я получаю сообщение об ошибке: «Ошибка: [ng: areq] Аргумент 'scope' требуется ..." *

Кто-то может помочь?

Ответы [ 3 ]

0 голосов
/ 02 июля 2018

Спасибо, Питер. Первой была ошибка копирования-вставки. Я новичок в Angular, и я просто пытаюсь понять, как это работает. Ваше решение работает, но я хотел бы отметить следующее: Что делать, если я не могу определить контроллер "тест" ДО? Я имею в виду, если определение контроллера происходит из html-запроса ajax (я имею в виду, если переменная div заполняется запросом ajax, включая определение контроллера). Вот почему я поместил определение скрипта в переменную div.

Возвращаясь к моему примеру ... главная страница: 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Test</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="angular.js"></script>
<script>
    var myApp = angular.module('myApp',[])
        .controller("mainCtrl",function($compile,$scope,$rootScope, $http){
            $scope.addDiv=function(){
            $http({
                url: "test.php",
                method: "post",
                data: '',
                responseType: 'text',
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function successCallback(response) {
                    $('body').append(response.data);
                }, function errorCallback(response) {
                     alert(response.statusText);
            });
            }
        });
</script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="mainCtrl">{{"AngularJS"}}
<button ng-click="addDiv();">addDiv</button>
</div>
</body>
</html>

Где test.php просто: 

<script>
myApp.controller('myController', function ($scope) {
            $scope.name = "Pippo";
            $scope.age = 10;
            });
</script>
<div ng-controller="myController">
Name:<input ng-model="name" />
Age:<input ng-model="age" />
</div>

Если я запускаю этот код, я не вижу ввод (имя и возраст), заполненный как определено в "myController" ...

0 голосов
/ 06 июля 2018

После некоторых попыток у меня все заработало. Это было проще, чем я думал. После определения углового модуля мне нужно добавить эту конфигурационную часть: 

myApp.config(['$controllerProvider','$compileProvider', '$filterProvider', '$provide', function($controllerProvider, $compileProvider, $filterProvider, $provide) {
    myApp.register = {
      controller: $controllerProvider.register,
      directive: $compileProvider.directive,
      filter: $filterProvider.register,
      factory: $provide.factory,
      service: $provide.service
    };

Затем зарегистрировать контроллер, поступающий с ajax: 

myApp.register.controller('myController', function($scope) {
   $scope.name = "Pippo";
   $scope.age = 18;
   $scope.go = function(){alert('It works!')}
});

Затем при успешном вызове из ajax добавьте часть компиляции: 

$compile($('#remdiv'))($scope);

Вот полный код: 

	<!DOCTYPE html>
    <html ng-app="myApp">
	<head>
	<title>First Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
	<script>
        myApp = angular.module('myApp',[])
		.controller("mainCtrl", function($scope, $http, $compile, $rootScope){
			$scope.addDiv = function(){
			var ajaxhtmlcode = '<script> \
				myApp.register.controller(\'testc\', function($scope) { \
					$scope.name="Pippo"; \
					$scope.age=18; \
					$scope.go = function(){alert(\'It works!\')} \
				}); \
				<\/script> \
				<div id="remdiv" ng-controller="testc"> \
				{{msg}} \
				Name:<input ng-model="name" /> \
				Age:<input ng-model="age" /> \
				<button ng-click="go();">Go!<\/button> \
				<\/div>';
			$('body').append(ajaxhtmlcode);	
			$compile($('#remdiv'))($scope);
			}
		});
		
		myApp.config(['$controllerProvider','$compileProvider', '$filterProvider', '$provide', function($controllerProvider, $compileProvider, $filterProvider, $provide) {
			myApp.register = {
			  controller: $controllerProvider.register,
			  directive: $compileProvider.directive,
			  filter: $filterProvider.register,
			  factory: $provide.factory,
			  service: $provide.service
			};
		}
		]);
    </script>
    </head>
    <body ng-controller="mainCtrl">
    <div>{{"AngularJS"}}</div>
    <button ng-click="addDiv();">addDiv</button>
    </body>
    </html>
0 голосов
/ 02 июля 2018

1- Прежде всего, у вас неверное имя контроллера, вы вводите контроллер с именем myController, но пытаетесь вызвать контроллер с именем testController

2 - вы не можете объявить новый контроллер таким образом, вы должны сначала объявить его и внедрить шаблон только с помощью compile метода 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>

    var myApp = angular.module('myApp',[])
    .controller("mainCtrl",function($compile,$scope,$rootScope){
    $scope.addDiv=function(){
    var div = $compile("<div ng-controller=\"test\">{{\"TEST\"}}<button ng-click=\"testDynamic();\">Click Me!</button></div>")($rootScope);
        $("body").append(div);
        // How to use $compile here???
    }
    
    })
    
       .controller('test', function ($scope) { 
            $scope.testDynamic = function(){ 
                alert('it works!'); 
            } 
        }); 
        
    
</script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body ng-controller="mainCtrl">
<div>{{"AngularJS"}}</div>
<button ng-click="addDiv();">addDiv</button>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...