Question

请参阅以下代码。我无法理解为什么这不起作用。

提前谢谢。

<html>
<head>
    <title></title>

</head>
<body ng-app="myapp" ng-controller="studentController" ng-init="countries=[{name:'India',language:'Hindi'},{name:'United States',language:'English'}]">

    <div>

        Enter first name: <input type="text" ng-model="student.firstname">
        Student Name {{student.fullname()}}!!
    </div>

    <script>
        function studentController($scope) {
            $scope.student = {
                firstname: "Fname",
                lastname: "Lname",
                fullname: function () {
                    var studObj;
                    studObj = $scope.student;
                    return studObj.firstname + ' ' + studObj.lastname;
                }
            };

        }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</body>
</html>

表达式{{student.fullname（）}}来自浏览器。

谢谢大家!!但是，请参阅下面非常相似的代码 - 这是有效的。我正在努力找到差异。

<html>
<head>
    <title></title>

</head>
<body ng-app="myapp" ng-controller="studentController" ng-init="countries=[{name:'India',language:'Hindi'},{name:'United States',language:'English'}]">

    <div>

        Enter first name: <input type="text" ng-model="student.firstname">
        Student Name {{student.fullname()}}!!
    </div>

    <script>
        function studentController($scope) {
            $scope.student = {
                firstname: "Fname",
                lastname: "Lname",
                fullname: function () {
                    var studObj;
                    studObj = $scope.student;
                    return studObj.firstname + ' ' + studObj.lastname;
                }
            };

        }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</body>
</html>

Answer 1

在使用之前，您需要先创建myapp。此外，您的角度代码应该在您加载angularjs文件后出现。

<html>
<head>
    <title></title>

</head>
<body ng-app="myapp" ng-controller="studentController" ng-init="countries=[{name:'India',language:'Hindi'},{name:'United States',language:'English'}]">

    <div>

        Enter first name: <input type="text" ng-model="student.firstname">
        Student Name {{student.fullname()}}!!
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
    <script>
        var app = angular.module("myapp", []);
        app.controller("studentController", function ($scope) {
            $scope.student = {
                firstname: "Fname",
                lastname: "Lname",
                fullname: function () {
                    var studObj;
                    studObj = $scope.student;
                    return studObj.firstname + ' ' + studObj.lastname;
                }
            };

        }
    </script>
</body>
</html>

Answer 2

两件事。

您需要在应用程序代码之前引入Angular。
您需要使用Angular的IoC容器注册您的控制器。

我为了风格做了一个更改，studentController变成了StudentController。这是因为Angular中的控制器是新的类或构造函数。惯用的JavaScript contsructor函数应该是PascalCase。

<html>
<head>
    <title></title>

</head>
<body ng-app="myapp" ng-controller="StudentController" ng-init="countries=[{name:'India',language:'Hindi'},{name:'United States',language:'English'}]">

    <div>

        Enter first name: <input type="text" ng-model="student.firstname">
        Student Name {{student.fullname()}}!!
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
    <script>
        StudentController.$inject = ['$scope'];
        function StudentController($scope) {
            $scope.student = {
                firstname: "Fname",
                lastname: "Lname",
                fullname: function () {
                    var studObj;
                    studObj = $scope.student;
                    return studObj.firstname + ' ' + studObj.lastname;
                }
            };
        }
      
        angular.module('myapp', []).controller('StudentController', StudentController);
    </script>
</body>
</html>

Answer 3

更改您的脚本文件并从ng-app中删除myapp，以这种方式使用您的代码： -

<div ng-controller="AppCtrl">
<h2> {{count}} </h2>
<button ng-click="plus()"> 1 </button>
<button dir count="count" plus="plus()"> 2 </button>
</div>

AngularJS ::不工作

3 个答案: