Question

我有一个非常基本的例子，它不起作用：我有两个方面，index.html和main.js.它们位于同一个文件夹中：

<!DOCTYPE html>
<html>
<head>
        <title> AngularJS Tutorials </title>
        <link rel="stylesheet" href="css/foundation.min.css">
        <script src="main.js"></script>
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <h1>{{data.message}}</h1>
    </div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>

main.js

function FirstCtrl($scope) {
    $scope.data = {message: "Hello"};
}

我的页面显示了这个：

{{data.message}}

Answer 1

您需要将控制器添加到角度模块。您可以使用controller函数为控制器添加js函数。

var FirstCtrl = function FirstCtrl($scope) {
    $scope.data = {message: "Hello2"};
};

angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);

如果您已经在页面的其他位置定义了角度模块，请使用此版本。

angular.module("myApp").controller("FirstCtrl",FirstCtrl);

以下是工作示例http://jsbin.com/tiroteharu/edit?html,js,console,output

Answer 2

<script src="~/Scripts/angular/angular.js"></script>
<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('FirstCtrl', ['$scope', function ($scope) {
        $scope.data = { message: "Hello" };
    }]);

</script>



<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <h1>{{data.message}}</h1>
    </div>
</div>

更多帮助阅读：https://docs.angularjs.org/guide/controller

AngularJS教程没有绑定数据

2 个答案: