我的角度應用程序不起作用

Question

我有以下代碼：

<!doctype html>
<html ng-app="myApp" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
  var app = angular.module("myApp", []);
  app.controller("FirstCtrl",function ($scope) {
    $scope.count = 0;
    $scope.increment = function (){
    $scope.count = $scope.count + 1;
    }
  });

</script >
<div ng-controller="FirstCtrl">
  <button class="btn" ng-model="count"
          ng-click="increment()">
    Click to increment</button>
  {{ count }}
</div>

怎么了 當我在沒有控制器的情況下正常工作時，但在使用app和app.controller時卻無法正常工作。 這是為什么？ 難道我做錯了什么？

Answer 1

您在這里混合樣式。 在HTML中，您使用Controller As語法，其中FirstCtrl as app1寫FirstCtrl as app1 。 這將在作用域上創建一個名為app1的對象，該對象是FirstCtrl的實例。 app1.count ， app1.increment()等將是FirstCtrl對象的屬性。

在您的控制器中，您沒有在控制器上創建屬性。 相反，您是將變量分配為$scope對象上的屬性。

使用$scope具有優勢，因為它本質上是一個全局對象，因此可以從應用程序中的任何位置訪問它。 但是，它的缺點也源於它是全局對象的事實。

您可以更改JavaScript以匹配Controller As語法，如下所示：

app.controller("FirstCtrl",function () {
    //create an alias to this for consistent reference
    var app1 = this;
    app1.count = 0;
    app1.increment = function (){
        app1.count += 1;
    };
});

或者，您可以更改HTML以使用$scope ：

<div ng-controller="FirstCtrl">
  <button class="btn" ng-model="count"
          ng-click="increment()">
    Click to increment</button>
  {{ count }}
</div>

更改javascript：

$scope.count += 1;

注意，您不必在HTML內引用$scope ，因為它的存在是隱式的。 但是，您的JavaScript $scope.count = this.count + 1;這一行$scope.count = this.count + 1; 在任何情況下都將永遠無法工作，再次是因為您正在混合樣式。

另外，如前所述，Controller As語法需要Angular 1.1.5或更高版本。

Answer 2

“ Controller as”語法僅從1.1.5+版本開始可用

據我所知，當使用“ Controller as”時，您想使用已分配的控制器別名（在您的情況下為“ app1”）引用變量，那么您應該使用“ this”來賦值變量。 控制器中的語法，或訪問不帶“ app1”的變量，則它將嘗試從范圍中獲取它。

http://jsbin.com/zehagogoku/3/edit

var app = angular.module("myApp", []);

app.controller("FirstCtrl",function ($scope) {

  this.count = 0;
  this.increment = function (){
    this.count = this.count + 1;
  };

  $scope.count = 0;
  $scope.increment = function(){
    $scope.count = $scope.count + 1;
  };

});

我的角度應用程序不起作用

問題描述

2 個解決方案

解決方案1
1 2015-02-12 23:20:44

解決方案2
1 已采納

我的角度應用程序不起作用

問題描述

2 個解決方案

解決方案1 1 2015-02-12 23:20:44

解決方案2 1 已采納

解決方案1
1 2015-02-12 23:20:44

解決方案2
1 已采納