2015-02-12 3 views
0

У меня есть этот код:мое угловое приложение не работает

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

, что случилось с ним? Когда я работаю без контроллеров, он работает нормально, но когда я использую приложение и приложение.controller, это не сработает. почему это? Я делаю что-то неправильно?

+0

нормально, так что ваше приложение все еще не работает после внесения изменений, которые я предлагал в моем ответе? Это не поможет получить точный ответ, который будет полезен для вас и других в будущем, если вы измените сломанный код после получения нескольких ответов ..... – Claies

+0

да Клэйс спасибо, проблема была версия углового я использовал , большое вам спасибо за вашу большую помощь – MasOud

ответ

1

дифференциала «контроллер, как» синтаксис доступен только в версии 1.1.5+

, что я знаю, при использовании «контроллера, как» и вы хотите сослаться на переменном с назначенным псевдонимом контроллера (в вашем случае " app1 "), тогда вы должны определить переменные с помощью« этого ». синтаксис в контроллере или доступ к переменным без «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; 
    }; 

}); 
1

Вы смешиваете стили здесь. В вашем HTML вы используете синтаксис Controller As, где вы пишете FirstCtrl as app1. Это делает объект с именем app1 в области, который является экземпляром вашего FirstCtrl. app1.count, app1.increment() и т. Д. Будет НедвижимостьFirstCtrl объект.

В контроллере вы не создаете свойства на контроллере. Вместо этого вы назначаете свои переменные в качестве свойств объекта $scope.

Использование $scope имеет свои преимущества в том, что он по существу является глобальным объектом, поэтому он доступен из любой точки вашего приложения. Однако недостатки также связаны с тем, что это глобальный объект.

Вы можете либо изменить JavaScript, чтобы соответствовать контроллер как синтаксис, как показано на рисунке:

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; 

примечание, вам не нужно ссылаться $scope insid e HTML, поскольку его присутствие неявно. Однако эта строка в вашем javascript $scope.count = this.count + 1; никогда не будет работать в любом случае, опять же потому, что вы смешиваете стили.

Также, как уже упоминалось, контроллер, поскольку для синтаксиса требуется Угловой 1.1.5 или выше.

Смежные вопросы