Angular js中的数据绑定

时间:2015-11-21 15:24:22

标签: javascript html angularjs

当我使用角度版本时。       “https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js” 我的代码工作正常。但是当我使用这个角度版本时,我的代码无效。       “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js”。

完整的HTML代码。

    <!DOCTYPE html>
    <html ng-app="">
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <head>
    <title>Angular Js Tutorial</title>
    </head>
    <body>
         <div ng-controller="Maincontroller">
             {{message}}
         </div>
        <script>
             function Maincontroller($scope)
              {
                  $scope.message = "Hii how are you";
              }
        </script>
    </body>
   </html>

我没有要求的输出。它只是打印。

   {{message}}

4 个答案:

答案 0 :(得分:3)

从角度1.3开始,您无法在全局范围内声明控制器。

重写控制器MainController

的声明
// Declaration of the module
angular.module('myApp', []);

// Declaration of the controller
angular.module('myApp').controller('MainController', function ($scope) {
    $scope.message = "Hii how are you";
});

关于上述更改,请将<html ng-app="">替换为<html ng-app="myApp">

答案 1 :(得分:1)

您的代码存在一些问题,

(i)您尚未在任何地方声明模块。 (ii)使用Angular 1.3,您不应在全球范围内声明控制器。

以下是更正的application

答案 2 :(得分:0)

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>Angular Js Tutorial</title>
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  </head>
  <body >
    <div ng-controller="MainController as mainCtrl">
      {{ mainCtrl.message }}
    </div>
    <script>
      (function() {
        'use strict';
        angular
          .module('app', []);
          .controller('MainController', ['$scope', function MainController($scope) {
              $scope.message = "Hii how are you";
        }]);
      })();
    </script>
  </body>
</html>

请参阅this

答案 3 :(得分:-1)

<html>
<head>
<title>Angular JS Controller Example</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/
1.4.7/angular.min.js"></script>
</head>

<body>
<h2>AngularJS Sample Controller Application</h2>

<div ng-app = "ukApp" ng-controller = "ukController">
<br>         
{{name}}
</div>

<script>
var mainApp = angular.module("ukApp", []);
mainApp.controller('ukController', function($scope) { 
$scope.name= "Umar Farooque Khan";
});
</script>

</body>
</html>

使用上面的代码执行上述任务。