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

我正在使用Angular.js创建应用程序，但我的index.html文件似乎没有访问我的controller.js文件。浏览器打印出像这样在大括号中的变量：{{} friend.name}，{{friend.number}}如何访问Angular.js中的控制器

这里是我的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; 
}

来源

2015-07-11 Kristine Rooks

你正在使用哪种角度版本？或任何控制台错误？ – Vineet

在ng-app中输入你的模块名称 –

您需要将其作为模块包含并在代码中指定模块。所以像这样的东西。

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"和你的代码应该工作。

编辑：我刚刚意识到我的原始解释可能不清楚。我的意思是角度有一个模块系统。模块是您连接控制器的地方。所以当你添加ng-app="exampleApp"时，角度会看到这个，看到你想从exampleApp模块中取出控制器。所以你需要指定那是你想要在代码中使用的模块，并且你将demoController控制器连接到该特定模块。

来源

2015-07-11 19:15:34 OceansOnPluto

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

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

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

的[]在这里你可以注入其他模块为您的应用。如ngRoute,ngAnimate或您自己的子模块。

你已经创建你需要告诉你的应用程序要使用的模块，该模块后，你做这个通过ngApp指令，通常设置在html标签：

<html ng-app="myApp">

记住，ngApp接受名，而不是它存储的变量。因此它将是myApp而不是myModule。

然后，你需要你的控制器挂钩这个模块，您可以通过简单的设置来实现：

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; 
}]);

现在，您将注入你的依赖作为函数的参数和内部''马克在数组中。

现在，您可以开始在控制器中编写内容，并且它们将在您的页面上可见。

来源

2015-07-11 19:22:29 Chrillewoodz

您必须将控制器绑定到您的应用程序/模块。它看起来并不像你已经创建了一个Angular应用程序（documentation）。

您应该可能会创建另一个.js文件模糊遵循以下格式来创建应用程序。请注意，您也可以在创建控制器之前在与控制器相同的文件中执行此操作。结尾处的空方括号表示您要注入的任何其他Angular依赖项，例如Angular Material Design，但因为它看起来不像您的代码使用任何代码，所以我们将它留空。然后，您需要修改控制器代码，将控制器绑定到您的Angular模块，方法是将此代码放在当前控制器功能代码之后。（documentation）。

app.controller("demoController", demoController)

最后，让你的HTML页面加载角模块和控制器，你需要把ng-app="MyAppName"标签在你的代码上demoController的父元素之一。通常，这是放在开头<html>或<body>标签上。所以，你可以改变你的首页标签以符合以下内容：

<body ng-app="MyAppName">

来源

2015-07-11 19:22:50 andrewgu

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

回答

相关问题