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。这会在作用域上创建一个名为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;中的这一行在任何一种情况下都不会起作用，因为您正在混合样式。

另外，如上所述，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 个答案: