Question

考虑以下网页：

<!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'是必需的...”

有人可以帮忙吗？

Answer 1

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>

Answer 2

谢谢彼得。首先是复制粘贴错误。我是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”中定义的输入内容（名称和年龄）...

Answer 3

经过一番尝试，我开始尝试了。这比我想的要简单。在定义了角度模块之后，我需要添加以下配置部分：

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>

AngularJS编译动态内容

3 个答案: