个人中心
gpt4 book ai didi

javascript - AngularJS编译后调用compile

转载 作者：行者123 更新时间：2023-12-03 06:08:00 27 4
gpt4 key购买 nike 

<!DOCTYPE HTML>
<html lang="en-US" ng-app="theapp">
<head>
	<meta charset="UTF-8">
	<title>asd</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
	<script type="text/javascript">
	var mainScope;
	angular.module('theapp', []).controller('MainCtrl', function($scope, $injector) {
	  $scope.demo = "test123";
	  $scope.scopecomp = function(){
		angular.element(document).injector().invoke(function ($compile) {
			$compile(document.body)($scope);
		});
	  }
	  mainScope = $scope;
	});
	function addDiv(){
		var $newDiv = $('<div>{{demo}}</div>');
		$(document.body).append($newDiv);
	}
	function comp(){
		mainScope.comp();
	}
	</script>
</head>
	<body ng-controller="MainCtrl" ng-change="comp();">
		<h1>{{demo}}</h1>
		<input type="text" id="compText" />
		<button onclick="addDiv();">add</button>
		<button ng-click="scopecomp();">compile with ng-click (works fine)</button>
		<button onclick="comp();">compile with onlick (not working)</button>
	</body>
</html>

我想在项目中的任何位置运行 comp() 函数。我尝试了按钮 onclick，它不起作用，但 ng-click 工作正常。问题是什么 ？为什么 onclick 不起作用？

<小时/>

新增:添加了changeContent功能。

<!DOCTYPE HTML>
<html lang="en-US" ng-app="theapp">
	<head ng-controller="MainCtrl as main">
		<meta charset="UTF-8">
		<title>asd</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
		<script type="text/javascript">
		angular.module("theapp", []).controller("MainCtrl", MainController);
		MainController.$injector = ['$timeout'];
		var vm;
		function MainController($timeout) {
			vm = this;
			vm.post = null;
			function loadStuff(){
				$timeout(function() {
					vm.post = {
						title: "Post Title",
						content: "Post Content"
					};
				}, 1000);
			}
			loadStuff();
			
		}
		function changeContent(){
			vm.post.content = "<div>new content </div>";
		}
		</script>
	</head>
	<body ng-controller="MainCtrl as main">
		<p ng-hide="main.post">Loading...</p>
		<h3>{{main.post.title}}</h3>
		<p>{{main.post.content}}</p>
		<button onclick="changeContent();">change</button>
	</body>
</html>

新的bodyController() 

function bodyController($scope, $injector) {
	_bodyController = this;
	$scope.title = "ttt";
	$scope.content = "aaa";
	$scope.comp = function(){
		angular.element(document).injector().invoke(function ($compile) {
			$compile(document.body)($scope);
		});
	}
	myAPP.Run(function(){
		$scope.title = globalOBJ.title;
		$scope.content = globalOBJ.content;
		$scope.comp();
	});
}

最佳答案

您应该将 '' 更改为:

<body ng-controller="MainCtrl" ng-model="demo" ng-change="comp();">

如果检查错误日志第一行的 url:https://docs.angularjs.org/error/$compile/ctreq?p0=ngModel&p1=ngChange 。问题解释:

Controller 'ngModel', required by directive 'ngChange', can't be found! Description This error occurs when HTML compiler tries to process a directive that specifies the require option in a directive definition, but the required directive controller is not present on the current DOM element (or its ancestor element, if ^ was specified).

To resolve this error ensure that there is no typo in the required controller name and that the required directive controller is present on the current element.

指令“ng-change”需要“ng-model”才能正常工作，这就是您收到编译错误的原因。

现在你的第二个问题，“为什么 onclick 不起作用？”。如果必须使用指令来操作，则永远不应该从 Controller 操作 DOM。当您从 ng-click 中调用“scopecomp()”时，该方法是从 Angular 引擎“内部”调用的，它将触发一个摘要循环，该循环将处理“html”(它不止于此) ，我试图保持简单)并打印您期望的内容，但是当您直接将“{{demo}}”添加到 DOM 时，该变量将不会被处理。

无需手动更改 DOM 即可完成您想要的操作，请检查下面的代码片段。我用超时功能模拟了您的“数据库请求”。

angular.module("app", [])
      .controller("MainController", MainController);

MainController.$injector = ['$timeout'];
function MainController($timeout) {
  var vm = this;
  vm.post = null;
    
  function loadStuff() {
    $timeout(function() {
      vm.post = {
        title: "Post Title",
        content: "Post Content"
      };
    }, 1000);
  }
  loadStuff();
  
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as main">
  <p ng-hide="main.post">Loading...</p>
  <h3>{{main.post.title}}</h3>
  <p>{{main.post.content}}</p>
</div>

关于javascript - AngularJS编译后调用compile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39449378/

27 4 0
文章推荐： javascript - 从源映射中读取 HTML
文章推荐： javascript - 路由不调用express中的函数
文章推荐： javascript - React JS 状态不会在点击时更新
文章推荐： javascript - XMLHttpRequest.open() 方法中的错误函数不正确
行者123
个人简介

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

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