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

Question

I have this code: 我有以下代码：

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

what is wrong with it? 怎么了 When I work without controllers it's works fine but when I use app and app.controller It will not work. 当我在没有控制器的情况下正常工作时，但在使用app和app.controller时却无法正常工作。 why is that? 这是为什么？ am I doing something wrong? 难道我做错了什么？

Answer 1

You are mixing styles here. 您在这里混合样式。 In your HTML, you are using the Controller As syntax, where you write FirstCtrl as app1 . 在HTML中，您使用Controller As语法，其中FirstCtrl as app1写FirstCtrl as app1 。 This makes an object called app1 on the scope, which is an instance of your FirstCtrl . 这将在作用域上创建一个名为app1的对象，该对象是FirstCtrl的实例。 app1.count , app1.increment() , etc. would be properties of the FirstCtrl object. app1.count ， app1.increment()等将是FirstCtrl对象的属性。

In your controller, you are not creating properties on the controller. 在您的控制器中，您没有在控制器上创建属性。 You are, instead, assigning your variables as properties on the $scope object. 相反，您是将变量分配为$scope对象上的属性。

Using $scope has advantages, in that it is essentially a global object, so it is accessible from everywhere in your app. 使用$scope具有优势，因为它本质上是一个全局对象，因此可以从应用程序中的任何位置访问它。 However, it's disadvantages are also rooted in the fact that it's a global object. 但是，它的缺点也源于它是全局对象的事实。

You can either change your javascript to match the Controller As syntax, as shown: 您可以更改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;
    };
});

Or, you can change your HTML to use $scope : 或者，您可以更改HTML以使用$scope ：

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

change in the javascript: 更改javascript：

$scope.count += 1;

note, you don't have to reference $scope inside the HTML, as it's presence is implicit. 注意，您不必在HTML内引用$scope ，因为它的存在是隐式的。 However, this line in your javascript $scope.count = this.count + 1; 但是，您的JavaScript $scope.count = this.count + 1;这一行$scope.count = this.count + 1; will never work in either case, again because you are mixing styles. 在任何情况下都将永远无法工作，再次是因为您正在混合样式。

Also, as mentioned, Controller As syntax requires Angular 1.1.5 or higher. 另外，如前所述，Controller As语法需要Angular 1.1.5或更高版本。

Answer 2

The "Controller as" syntax is only available from version 1.1.5+ “ Controller as”语法仅从1.1.5+版本开始可用

By what i know when using "Controller as" and you want to reference a variable with the assigned controller alias (in your case "app1") then you should assing the variables with "this." 据我所知，当使用“ Controller as”时，您想使用已分配的控制器别名（在您的情况下为“ app1”）引用变量，那么您应该使用“ this”来赋值变量。 syntax in the controller, or access the variables without the "app1", then it will try to get it from the scope. 控制器中的语法，或访问不带“ app1”的变量，则它将尝试从范围中获取它。

http://jsbin.com/zehagogoku/3/edit 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 已采纳