正在学习 angular 未在视图中显示来自控制器的数据

Question

努力学习angular......

//Index.html

   <!DOCTYPE html>
<html ng-app="myModule"> <!--LINK TO MODULE-->
<head>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body ng-controller="myController"> <!--LINK TO CONTROLLER-->
    <div ng-controller="myController"> <!--LINK TO CONTROLLER-->
    {{ message }} <!--LINK TO THE SCOPE IN THE CONTROLLER*/-->
    </div>
    <div>
        {{ message }} <!--DATA BINDING FROM MESSAGE PROPERTY OF SCOPE OBJECT-->
    </div>
    <div>
        is 1 == to 2 {{ 1==2}}
        <br />
        only output name {{ {name: 'marty', age:'30'}.name }}
        <br />
        only output name from array {{ ['marty','john','kelly'][2]}}

    </div>
    <div>
            40 + 50 = {{40+50}}
    </div>
    <div>
        <br />
        <div>
            FirstName : {{ employee.firstName }}
        </div>
        <div>
            LastName : {{ employee.lastName }}
        </div>
        <div>
            Gender : {{ employee.gender }}
        </div>
    </div>
</body>
</html>

//Script.js

/// <reference path="angular.min.js" />

//REGISTER THE CONTROLLER WITH THE MODULE
var myApp = angular.module("myModule", []);

/*var myController = function ($scope) {
    $scope.message = "Angular Tutorial";
};*/

myApp.controller("myController", function ($scope) {
    var employee = {
        firstName: "David",
        lastName: "Hasting",
        gender: "Male"
    };

    $scope.message = "Angular Tutorial";
});

其他输出工作正常，但不会显示员工详细信息... 关于为什么的任何想法？感谢您的帮助

//输出

    Angular Tutorial
Angular Tutorial
is 1 == to 2 false 
only output name marty 
only output name from array kelly
40 + 50 = 90

FirstName :
LastName :
Gender :

Answer 1

您应该使用 $scope.employee 而不是 var,

myApp.controller("myController", function ($scope) {
     $scope.employee = {
        firstName: "David",
        lastName: "Hasting",
        gender: "Male"
    };

    $scope.message = "Angular Tutorial";
});

演示

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

myApp.controller('myController', ['$scope', function($scope) {
  $scope.employee = {
    firstName: 'David',
    lastName: 'Hasting',
    gender: 'Male'
  };

  $scope.message = 'Angular Tutorial';
}]);

<html data-ng-app="myModule">

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

<body data-ng-controller="myController">
  <div>
    {{ message }}
  </div>
  <div>
    {{ message }}
  </div>
  <div>
    is 1 == to 2 {{ 1==2}}
    <br /> only output name {{ {name: 'marty', age:'30'}.name }}
    <br /> only output name from array {{ ['marty','john','kelly'][2]}}

  </div>
  <div>
    40 + 50 = {{40+50}}
  </div>
  <div>
    <br />
    <div>
      FirstName : {{ employee.firstName }}
    </div>
    <div>
      LastName : {{ employee.lastName }}
    </div>
    <div>
      Gender : {{ employee.gender }}
    </div>
  </div>
</body>

</html>

正在学习 angular 未在视图中显示来自控制器的数据

learning angular not showing data from controller in view

angularjs

angularjs-scope