简单的示例AngularJS

时间:2016-10-10 16:06:52

标签: javascript angularjs

按下按钮时使用AngularJS显示数据的示例是

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<script>
function Display($scope){
    $scope.show_date = function(){
        $scope.show=new Date();
    }       
}   
 </script>
</head>
<body  ng-controller="Display">
<button ng-click="show_date()">Show date!</button>
<div ng-message="required"> {{show}} </div>
</body>
</html>

这段代码我错在哪里?

2 个答案:

答案 0 :(得分:0)

你正在使用1.3以上的角度版本,基本上从那里开始全局控制器函数声明没有被推迟

如下所示更改您的控制器,

var myApp = angular.module("myModule", [])
 myApp.controller("Display", function ($scope) 
 {
    $scope.show_date = function(){
    $scope.show=new Date();
  }     
 );

DEMO

答案 1 :(得分:0)

两件事:

您只需要定义应用模块的实例:

angular.module('app', [])

然后你需要在这个app模块中注册你的控制器:

.controller('DisplayCtrl', DisplayCtrl);

点击Run code snippet以查看您的代码是否有效。

function DisplayCtrl($scope){
    $scope.show_date = function(){
        $scope.show=new Date();
    }       
}   

angular.module('app', [])
    .controller('DisplayCtrl', DisplayCtrl);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="DisplayCtrl">
  <button ng-click="show_date()">Show date!</button>
  <div ng-message="required"> {{show}} </div>
</div>