Question

我在angular / js开发方面相当新，所以现在我已经堆积了这个。

当我将 ng-controller =“HeaderController”添加到我的HTML代码时，它无法加载Angular。如果你删除这一切都很好。为什么会这样？感谢您的帮助，对不好的英语抱歉：）

代码：

(function() {
	var app = angular.module ('FunStuff',[]);

	app.controller ('TextController',['$scope',function($scope){
		$scope.stuff = [];
		$scope.add = function(){
				$scope.stuff.push ($scope.name);
		}
	}]);
	app.controller ('HeaderController'['$scope',function($scope){
		$scope.textClass = '';
		$scope.changeClrClss = function(name){
			$scope.ClrClss = name;
		}
	}]);
})();

<!DOCTYPE html>
<html ng-app ="FunStuff">

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>LEARN JS</title>
	<meta charset="utf-8">
</head>

<body >

	<header  ng-class = "ColorClass" ng-controller="HeaderController">
		<h1>$~/Path_To_Js/</h1>
		<button class="changeColorBtn" ng-click="changeColorClass('white')">
			ChangeColorButton
		</button>
	</header>

	<div class="wrapper" >
		<article ng-controller = "TextController">
			<p>There will be some information</p>
			<form ng-submit="add()">
				<input ng-model="name"><button>Add</button>
			</form>
			<ul class="buttons" ng-repeat= "n in stuff track by $index">
				<li>{{n}}</li>
			</ul>
		</article>
	</div>
	<script type="text/javascript" src="index.js"></script>
</body>

</html>

Answer 1

正如您的错误所示，您在标题控制器后缺少 , ，

app.controller ('HeaderController',['$scope',function($scope){
        $scope.textClass = '';
        $scope.changeClrClss = function(name){
            $scope.ClrClss = name;
        }
    }]);

<强>样本

var app = angular.module ('FunStuff',[]);

	app.controller ('TextController',['$scope',function($scope){
		$scope.stuff = [];
		$scope.add = function(){
				$scope.stuff.push ($scope.name);
		}
	}]);
	app.controller ('HeaderController',['$scope',function($scope){
		$scope.textClass = '';
		$scope.changeClrClss = function(name){
			$scope.ClrClss = name;
		}
	}]);

<!DOCTYPE html>
<html ng-app ="FunStuff">

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>LEARN JS</title>
	<meta charset="utf-8">
</head>

<body >

	<header  ng-class = "ColorClass" ng-controller="HeaderController">
		<h1>$~/Path_To_Js/</h1>
		<button class="changeColorBtn" ng-click="changeColorClass('white')">
			ChangeColorButton
		</button>
	</header>

	<div class="wrapper" >
		<article ng-controller = "TextController">
			<p>There will be some information</p>
			<form ng-submit="add()">
				<input ng-model="name"><button>Add</button>
			</form>
			<ul class="buttons" ng-repeat= "n in stuff track by $index">
				<li>{{n}}</li>
			</ul>
		</article>
	</div>
	<script type="text/javascript" src="index.js"></script>
</body>

</html>

Answer 2

(function() {
    var app = angular.module ('FunStuff',[]);

    app.controller ('TextController',['$scope',function($scope){
        $scope.stuff = [];
        $scope.add = function(){
                $scope.stuff.push ($scope.name);
        }
    }]);
    app.controller ('HeaderController',['$scope',function($scope){
                                    //^^ missing comma here
        $scope.textClass = '';
        $scope.changeClrClss = function(name){
            $scope.ClrClss = name;
        }
    }]);
})();

无法添加第二个控制器

2 个答案: