Angular js控制器无法正常工作答案

【问题标题】：Angular js Controller not working wellAngular js控制器无法正常工作
【发布时间】：2017-06-12 02:58:31
【问题描述】：

function studentController($scope) {
		$scope.student = {
			firstName : "Mahesh",
			lastName : "Parashar",
			fullName : function() {
				var studentObject;
				studentObject = $scope.student;
				return studentObject.firstName + " " + studentObject.lastName;
			}
		};
	}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<html><title>AngularJS First Application</title>
	<body><h1>Sample Application</h1>
		<div ng-app="" ng-controller="studentController">
			<p>
				Enter your Name:<input type="text" ng-model="data">
			</p>
			<p>
				Hello <span ng-bind="data"></span>!
			</p>
		</div>

		<br />
		<table border="1px">
		<tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr>
		<tr><td>student.firstName</td><td>student.lastName</td><td>student.fullName</td></tr>

		</table>
		<script src="angular.min.js"></script>
	</body>
</html>

<script>
	
</script>

我是 Angular js 的新手，开始制作程序但 ng-controller 无法正常工作，当我添加 ng-controller="studentController" 正常 angular ng-bind="data" 程序也无法正常工作，所以请任何人帮助我找出其中有什么问题。

谢谢

普里扬卡·桑哈拉

【问题讨论】：

在此处发布您的代码
是的，现在我已经发布了我的代码
可能重复 - stackoverflow.com/questions/26602883/…

标签： angularjs angularjs-directive

【解决方案1】：

您的代码有很多问题！

(i) 你的角度版本和你定义控制器的方式。您应该有一个声明如下的模块名称，

ngular.module('myApp',[])

(ii) 在您的 HTML 中使用表达式 {} 和模型名称，例如，

{{student.firstName}}

(iii) fullName 是一个函数，所以你需要像这样调用，

<td>{{student.fullName()}}</td>

演示

angular.module('myApp',[]).controller('studentController', function($scope){
  $scope.student = {
			firstName : "Mahesh",
			lastName : "Parashar",
			fullName : function() {
				var studentObject;
				studentObject = $scope.student;
				return studentObject.firstName + " " + studentObject.lastName;
			}
		};
          
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<title>AngularJS First Application</title>
<body>
    <h1>Sample Application</h1>
    <div ng-app="myApp" ng-controller="studentController">
        <p>
            Enter your Name:<input type="text" ng-model="data">
        </p>
        <p>
            Hello <span ng-bind="data"></span>!
        </p>
        <br />
        <table border="1px">
            <tr>
                <th>Fisrt Name</th>
                <th>Last Name</th>
                <th>Full Name</th>
            </tr>
            <tr>
                <td>{{student.firstName}}</td>
                <td>{{student.lastName}}</td>
                <td>{{student.fullName()}}</td>
            </tr>
        </table>
    </div>
</body>

【讨论】：

【解决方案2】：

您应该为 Angular 定义一个应用程序并在其下添加一个控制器

    angular.module('app', []).controller('studentController', function($scope) {
  $scope.student = {
        firstName : "Mahesh",
        lastName : "Parashar",
        fullName : function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
        }
    };
});

然后在ng-app中添加应用名称

【讨论】：

【解决方案3】：

我尝试稍微修改这个程序以使其正常工作，代码如下。

JavaScript.js

    var app = angular.module("app", [])
    .controller("studentController", studentController);

    function studentController($scope) {
    $scope.student = {
        firstName: "Mahesh",
        lastName: "Parashar",
    };
    $scope.getFullName = function () {
        var studentObject;
        studentObject = $scope.student;
        //return studentObject.firstName + " " + studentObject.lastName;
        $scope.student.fullName = studentObject.firstName + " " + studentObject.lastName;
    }
}

HTML页面

<html>
<head>
    <title>AngularJS First Application</title>
</head>
<body>
    <h1>Sample Application</h1>
    <div ng-app="app" ng-controller="studentController">
        <p>
            Enter your Name:<input type="text" ng-model="data">
        </p>
        <p>
            Hello <span ng-bind="data"></span>!
        </p>


        <br />
        <table border="1px">
            <tr><th>Fisrt Name</th><th>Last Name</th><th>Full Name</th></tr>
            <tr><td>{{student.firstName}}</td><td>{{student.lastName}}</td><td>{{student.fullName}}</td></tr>
            <tr> <input type="button" value="Get Full Name" ng-click="getFullName()"/> </tr>
        </table>
    </div>
    <script src="../angular.js"></script> <!--This is the angularJS libyrary file-->
    <script src="JavaScript.js"></script> <!--This is your java script file-->
</body>
</html>

如果您需要它是否适合您，请告诉我。

【讨论】：