如何将controller.js包含在ng-include html页面中?

时间:2014-12-22 08:39:20

标签: javascript angularjs controller

这是home.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css"	href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>

<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>




<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>


<script type='text/javascript'>//<![CDATA[ 
  //angular module
  
	'use strict';
	alert("1");
	var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
	
	myApp.controller('commonController', ['$scope', '$http',  function($scope, $http) {
		$scope.menus =  [
			        	   { link : '/summary', treeState : '' , url: 'body.html'},
			        	   { link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
			        	  
			        	];
		
		$scope.menu = $scope.menus[0];
		
	
	}]);


</script>
</head>



<body  ng-controller="commonController">

	<div>
		<div ng-include="'head.html'"></div>
	</div>
	
	
	<!-- footer  -->
	<footer class="footer">
		<div ng-include="'footer.html'"></div>
	</footer>
	<!-- footer  -->

</body>

</html>

head.html是

<script type='text/javascript'>

myApp.controller('headController', ['$scope', '$http',  function($scope, $http) {
	
	$scope.change = function (param){
		alert(param);
		
	};
}]);

</script>



<div ng-controller="headController">
    details......
</div>
	

使用angularjs版本1.3.7

问题是'找不到headController'

在我的代码中我该怎么办? 我可以改变我的角度版本吗? 1.2.X版本可以允许函数headController($ scope){.....}; 但1.3.7不起作用 我该怎么办?

1 个答案:

答案 0 :(得分:0)

这是一个已报道的已知问题。

https://github.com/angular/angular.js/issues/3756

https://gist.github.com/endorama/7369006

长话短说,脚本标签是一种特殊的小花,棱角分明不会这样对待它。如果在包含angular之前包含jquery,则此问题将自行解决。否则你可以执行github链接推荐的脚本延迟加载技术。

或者只是从head.html移动脚本标记并将其放在home.html上,因为它总是需要的。 (免责声明:对于任何规模和复杂程度的应用程序,我不会这样做,但对于小的东西,这是最简单的解决方案。当然,创建js文件并通过单独的脚本包含它们将是最好的。)