Question

我试图调用外部js文件来实现角度js控制器。请在下面找到代码。但它没有给出外部js文件访问代码的添加结果。有人能纠正我在这里做错了什么吗？

[如果我没有添加外部js访问代码，则会显示正确的结果]

<!DOCTYPE html>
<html >
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <body ng-app="myApp">

        <!-- Angular JS controller sample -->
        <div ng-controller="myAppCtrl">
            First name : <input type="text" ng-model="firstName"> <br>
            Last name : <input type="text" ng-model="lastName"> <br>
            Full name is : {{firstName + " " + lastName}} <br>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myAppCtrl', function($scope) {
                $scope.firstName = "Prabakar"
                $scope.lastName = "Prabu"
            });
        </script>

        <!-- Method based controller -->
        <div ng-controller="methodCtrler"> 
            <br>
            First name is : <input type="text" ng-model="fName"> <br>
            Last name is : <input type="text" ng-model="lName"> <br>
            Full name : {{myFunction() }}
            <br>        
        </div>
        <script>
            //var app1 = angular.module('myApp',[]);
            app.controller ('methodCtrler', function($scope) {
                $scope.fName = "Jonathan"
                $scope.lName = "Gladwin" 
                $scope.myFunction = function() {
                    return $scope.fName + " " + $scope.lName;
                }
            });
        </script>

        <!-- Method call from external JS files -->
        <br>
        <div ng-controller ="ryanContrler">
            My first name : <input type="text" ng-model="ryanFirstname"> <br>
            My last name : <input type="text" ng-model="austinLastname"> <br>
            My full name : {{fullName()}
        </div>
        <script src ="ryanNameContorller.js"></script>

    </body>

</html>

ryanNameContorller.js

angular.module ('myApp', []).controller('ryanContrler', function($scope) {
    $scope.ryanFirstname = "Ryan",
    $scope.austinLastname = "Austin",
    $scope.fullName = function () {
        return $scope.ryanFirstname + " " + $scope.austinLastname; 
    }

});

结果是，

Answer 1

您错过} ryanContrler My full name : {{fullName()}替换My full name : {{fullName()}}

在 ryanNameContorller.js 文件中使用此新代码

angular.module('myApp').controller('ryanContrler', ['$scope', function($scope){
    $scope.ryanFirstname = "Ryan",
    $scope.austinLastname = "Austin",
    $scope.fullName = function() {
        return $scope.ryanFirstname + " " + $scope.austinLastname;
    }

}]);

<强> HTML

<!DOCTYPE html>
<html >
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <body ng-app="myApp">

        <!-- Angular JS controller sample -->
        <div ng-controller="myAppCtrl">
            First name : <input type="text" ng-model="firstName"> <br>
            Last name : <input type="text" ng-model="lastName"> <br>
            Full name is : {{firstName + " " + lastName}} <br>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myAppCtrl', function($scope) {
                $scope.firstName = "Prabakar"
                $scope.lastName = "Prabu"
            });
        </script>

        <!-- Method based controller -->
        <div ng-controller="methodCtrler"> 
            <br>
            First name is : <input type="text" ng-model="fName"> <br>
            Last name is : <input type="text" ng-model="lName"> <br>
            Full name : {{myFunction() }}
            <br>        
        </div>
        <script>
            //var app1 = angular.module('myApp',[]);
            app.controller ('methodCtrler', function($scope) {
                $scope.fName = "Jonathan"
                $scope.lName = "Gladwin" 
                $scope.myFunction = function() {
                    return $scope.fName + " " + $scope.lName;
                }
            });
        </script>

        <!-- Method call from external JS files -->
        <br>
        <div ng-controller ="ryanContrler">
            My first name : <input type="text" ng-model="ryanFirstname"> <br>
            My last name : <input type="text" ng-model="austinLastname"> <br>
            My full name : {{fullName()}}
        </div>
        <script src ="ryanNameContorller.js"></script>

    </body>

</html>

Demo here

Answer 2

问题是你的<script>添加js文件是在 ng-controller <div>之后将其放入<head>以确保首先调用< / p>

您的HTML： - ＆gt;

<html >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
 <script src ="ryanNameContorller.js"></script>
</head>
    <body ng-app="myApp">

        <!-- Angular JS controller sample -->
        <div ng-controller="myAppCtrl">
            First name : <input type="text" ng-model="firstName"> <br>
            Last name : <input type="text" ng-model="lastName"> <br>
            Full name is : {{firstName + " " + lastName}} <br>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myAppCtrl', function($scope) {
                $scope.firstName = "Prabakar"
                $scope.lastName = "Prabu"
            });
        </script>

        <!-- Method based controller -->
        <div ng-controller="methodCtrler"> 
            <br>
            First name is : <input type="text" ng-model="fName"> <br>
            Last name is : <input type="text" ng-model="lName"> <br>
            Full name : {{myFunction() }}
            <br>        
        </div>
        <script>
            //var app1 = angular.module('myApp',[]);
            app.controller ('methodCtrler', function($scope) {
                $scope.fName = "Jonathan"
                $scope.lName = "Gladwin" 
                $scope.myFunction = function() {
                    return $scope.fName + " " + $scope.lName;
                }
            });
        </script>

        <!-- Method call from external JS files -->
        <br>
        <div ng-controller ="ryanContrler">
            My first name : <input type="text" ng-model="ryanFirstname"> <br>
            My last name : <input type="text" ng-model="austinLastname"> <br>
            My full name : {{fullName()}}
        </div>

    </body>

</html>

Answer 3

代码中有一些错误可能会或可能不会导致错误。

您应该正确拼写控制器。 Ctrl / Ctrler / Contorller 让您自己和需要维护代码的人感到困惑。
angular.module('myApp',[])只应调用一次。如果您需要在外部js文件中获取应用程序，请使用angular.module('myApp')。
将脚本放在<head>或<body>内，不要直接将其放入<html>。
遇到错误时，应首先检查控制台日志。如果您不理解，请将其发布在问题中。（提示：按F12打开）

Angular JS：在外部文件中添加控制器后，没有给出预期的结果

3 个答案: