Egghead 角度控制器不工作答案

【问题标题】：Egghead angular controller not workingEgghead 角度控制器不工作
【发布时间】：2015-01-25 08:42:18
【问题描述】：

我正在尝试学习eggheads angularJS 教程。我有相同的代码，但我的不工作......

这是我正在使用的代码：

index.html:

<!DOCTYPE html>

<html>

<head>
    <title>AngularJS Tutorials</title>
    <link rel="stylesheet" href="../foundation/css/foundation.min.css">
    <script type="text/javascript" src="main.js"></script>
</head>

<body>
    <div ng-app="">
        <div ng-controller="FirstCtrl">
            <h1>{{data.message + " world"}}</h1>
            <div class="{{data.message}}">
                Wrap me with a foundation component.
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>

</html>

main.js：

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

【问题讨论】：

标签： angularjs binding controller

【解决方案1】：

问题是角度版本。

您的版本是1.3.4，而不是1.2.3。

Angular 1.2.3 (egghead) 的应用程序：plunkr
角度为 1.3.4 的应用程序：plunker

【讨论】：

【解决方案2】：

嗨，你错过了几件事

你的应用声明：

var app = angular.module('app', []);
你的控制器声明

app.controller('FirstCtrl', FirstCtrl);
在你的 html 中

ng-app="app"

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

app.controller('FirstCtrl', FirstCtrl);

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

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

<body ng-app="app">
  <div ng-controller="FirstCtrl">
    <h1>{{data.message + " world"}}</h1>
    <div class="{{data.message}}">
      Wrap me with a foundation component.
    </div>
  </div>
</body>

【讨论】：