Question

＆＃13;

<!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>

＆＃13;

我想在项目的任何地方运行comp（）函数。我试过按钮onclick，它没有工作，但ng-click工作正常。问题是什么？为什么onclick不起作用？

新增：添加了changeContent函数。

＆＃13;

<!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>

＆＃13;

新的bodyController（）

＆＃13;

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

＆＃13;

Answer 1

你应该改变你的''：

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

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

指令'ngChange'所需的控制器'ngModel'不能   找到了！说明HTML编译器尝试时发生此错误   处理指令中指定require选项的指令   定义，但不存在所需的指令控制器   当前DOM元素（或其祖先元素，如果指定了^）。

要解决此错误，请确保所需内容中没有拼写错误   控制器名称和所需的指令控制器存在   当前元素。

指令'ng-change'需要'ng-model'才能正常工作，这就是你得到编译错误的原因。

现在你的第二个问题，“为什么onclick不起作用？”。如果必须使用指令，则永远不应该从控制器操作DOM。当您从ng-click调用“scopecomp（）”时，从角度引擎的“内部”调用该方法，它将触发摘要循环，它将处理“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>

Answer 2

＆＃13;

$FirebaseJS.Run(function(){
		$scope.$apply(function(){
			$scope.obj = globalOBJ;
		});
	});

＆＃13;

最后我明白了。

AngularJS编译后调用编译

新增：添加了changeContent函数。

2 个答案: