Question

试着学习角度......

//的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";
});

<强>样本

＆＃13;

var myApp = angular.module('myModule', []);

myApp.controller('myController', ['$scope', function($scope) {
  $scope.employee = {
    firstName: 'David',
    lastName: 'Hasting',
    gender: 'Male'
  };

  $scope.message = 'Angular Tutorial';
}]);

＆＃13;

<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>

＆＃13;

学习角度不显示来自控制器的数据

1 个答案: