Angular js 中的数据绑定答案

【问题标题】：Data binding in Angular jsAngular js 中的数据绑定
【发布时间】：2016-02-24 00:38:15
【问题描述】：

当我使用角度版本时。 "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}}

【问题讨论】：

您能否在页面呈现时提供一些控制器代码或控制台输出？奇怪的是有一些例外不允许绑定完成
Firefox 控制台出错。"错误：[ng:areq] errors.angularjs.org/1.4.7/ng/… I/ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… qb@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… Sa@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… Xe/this.$get ajax.googleapis.com/ajax/libs/angularjs/1.4.7/…

标签： javascript html angularjs

【解决方案1】：

从 Angular 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">

【讨论】：

太棒了！我在下面发布了相同的内容

【解决方案2】：

您的代码几乎没有问题，

(i)你没有在任何地方声明模块。 (ii) 在 Angular 1.3 中，控制器不应在全局范围内声明。

这里是更正后的application

【讨论】：

【解决方案3】：

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

【讨论】：

如果您使用的是MainController as mainCtrl，请不要使用$scope。使用this。

【解决方案4】：

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

使用上述代码完成上述任务。

【讨论】：