Question

我正在使用Angular.js创建应用，但我的index.html文件似乎没有访问我的controller.js文件。浏览器以大括号打印出变量，如下所示：{{friend.name}}，{{friend.number}}

这是我的html文件：

<!DOCTYPE HTML>
<html ng-app>
    <head>
        <title>Angular Directives</title>
    </head>

    <body>
        <div class="container" ng-controller="demoController">
            <h1>Angular Directives</h1>
            <h2>ng-model example: two-way binding and $scope</h2>
            <h3>Name</h3>
            <input type="text" ng-model="name">
            <br />
            Hello, {{name}}!
            <h2>ng-repeat example</h2>
            <ul>
                <li ng-repeat="friend in friends">{{friend.name}}, {{friend.number}}</li>
            </ul>   
        </div>  
    </body> 

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src = "controller.js"></script>
</html>

这是我的controller.js档案：

var demoController = function($scope) {
    $scope.name = "John Doe";

    var friend1 = {
        name: "Tim Thompson",
        number: "111-111-1111"
    };

    var friend2 = {
        name: "Sally Smith",
        number: "222-222-2222"
    };

    var friend3 = {
        name: "Billy Bob",
        number: "333-333-3333"
    };

    var friends = [friend1, friend2, friend3];
    $scope.friends = friends;
}

Answer 1

您需要将其作为模块包含在内，并在代码中指定模块。就像这样。

angular.module("exampleApp", [])
.controller("demoController", function($scope) {
$scope.name = "John Doe";

var friend1 = {
    name: "Tim Thompson",
    number: "111-111-1111"
};

var friend2 = {
    name: "Sally Smith",
    number: "222-222-2222"
};

var friend3 = {
    name: "Billy Bob",
    number: "333-333-3333"
};

var friends = [friend1, friend2, friend3];
$scope.friends = friends;

}）;

然后设置ng-app="exampleApp"，您的代码应该有效。

编辑：我刚刚意识到我原来的解释可能不清楚。我的意思是angular有一个模块系统。模块是您连接控制器的地方。因此，当您添加ng-app="exampleApp"时，angular会查看该内容并看到您要从exampleApp模块中提取控制器。因此，您需要指定您希望在代码中使用的模块，并将demoController控制器附加到该特定模块。

Answer 2

每个Angular应用程序至少需要一个模块，控制器，服务，工厂和指令等将连接到该模块。你似乎错过了这个，因此你的控制器不起作用。

首先创建一个这样的模块：

var myModule = angular.module('myApp', []);

[]是您可以向应用注入其他模块的地方。例如ngRoute，ngAnimate或您自己的子模块。

创建模块后，您需要告诉应用程序使用哪个模块，您可以通过ngApp指令执行此操作，通常在html标记上设置：

<html ng-app="myApp">

请注意，ngApp接受模块的名称，而不是其存储的变量。因此它将是myApp而不是myModule。< / p>

然后你需要通过简单的设置将控制器挂钩到这个模块：

myModule.demoController = function($scope) {
  $scope.name = "John Doe";

  var friend1 = {
    name: "Tim Thompson",
    number: "111-111-1111"
  };

  var friend2 = {
    name: "Sally Smith",
    number: "222-222-2222"
  };

  var friend3 = {
    name: "Billy Bob",
    number: "333-333-3333"
  };

  var friends = [friend1, friend2, friend3];
  $scope.friends = friends;
}

作为附加提示，还建议使用数组注释，这样您的应用程序就不会在缩小时中断。因此，将控制器更改为：

myModule.demoController(['$scope', function($scope) {
  $scope.name = "John Doe";

  var friend1 = {
    name: "Tim Thompson",
    number: "111-111-1111"
  };

  var friend2 = {
    name: "Sally Smith",
    number: "222-222-2222"
  };

  var friend3 = {
    name: "Billy Bob",
    number: "333-333-3333"
  };

  var friends = [friend1, friend2, friend3];
  $scope.friends = friends;
}]);

现在，您将把依赖项作为函数参数注入到''标记内的数组中。

现在，您可以开始在控制器中编写内容，并在页面上显示这些内容。

Answer 3

您必须将控制器绑定到您的应用/模块。它也看起来你还没有创建一个Angular应用程序（documentation）。

您应该按照以下格式隐约创建另一个.js文件来创建应用。请注意，您也可以在创建控制器之前在与控制器相同的文件中执行此操作。最后的空方括号表示您要注入的任何其他Angular依赖项，例如Angular Material Design，但由于它看起来不像您的代码使用任何，我们将其留空。

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

然后，您需要修改控制器代码，将控制器绑定到Angular模块，方法是将此代码放在当前控制器功能代码之后。（documentation）。

app.controller("demoController", demoController)

最后，要使您的HTML页面加载Angular模块和控制器，您需要在ng-app="MyAppName"的其中一个父元素的代码中添加demoController标记。通常，这会放在开头<html>或<body>标记上。因此，您可以更改开始正文标记以匹配以下内容：

<body ng-app="MyAppName">

如何访问Angular.js中的控制器

3 个答案: