2016-09-02 3 views
1

Ich bin ein bisschen wie ein newb bei angular und mit einem persnickety Problem. Ich versuche, eine Variable, die an ein Div in meinem Controller gebunden ist, mit einer Funktion zu aktualisieren, die aufgerufen wird, wenn auf eine Schaltfläche geklickt wird. (Die Funktion ist mit ng-click an die Schaltfläche gebunden.) Wenn ich auf die Schaltfläche klicke, ändert sich der angezeigte Wert nicht, obwohl die Variable geändert wird. Wenn ich jedoch dem Element selbst die gleiche Aktualisierungsfunktion zuteile, ändert sich dies, wenn ich auf dieses Element klicke. Kann mir jemand erklären? Hier ist mein Code:Angular JS Zwei-Wege-Bindung nicht aktualisiert, wenn die Schaltfläche

Javascript

angular.module('Compendium',['ngRoute']) 
.config(function($routeProvider){ 
    $routeProvider.when('/css',{ 
     templateUrl:'css.html', 
     controller: 'cssCtrl' 
    }) 
}).controller('cssCtrl',function($scope,counterhelper){ 
    //counterhelper($scope.data) 
//counter.increment(); 

    $scope.increment = function(){ 
     alert('hey'); 
     $scope.display = 'Nothing' 
    } 
    $scope.display = 1; 

     // var transform = function(){ 
     // 

}).factory('counterhelper',function(){ 
    var addOne = function(val){ 
     val ++; 
    } 
    return addOne; 
}) 

und Html

<html ng-app = "Compendium"> 
<head> 
<script src = "node_modules/angular/angular.js"> </script> 
<script src = "node_modules/angular-route/angular-route.js"> </script> 
<script src = "app.js"></script> 
<script type="text/ng-template" id="css.html"> 
    <h1 ng-controller = 'cssCtrl' ng-click='increment()'> 
    {{display}} 
    </h1> 
    <button ng-click = 'increment()' >Increment</button> 
</script> 
</head> 
<body> 
<div ng-view> 
</div> 
</body> 

</html> 

Dank!

+0

Dont verwenden 'ng-Controller =‚cssCtrl'' in Ihrer Vorlage. –

+0

Ich verstehe, dass Sie ein Newbee sind, aber versuchen Sie, Ihren Code aufzuräumen, bevor Sie ihn in Ihrer Frage veröffentlichen. Du hast eine Menge toten Code gepostet (deinen kommentierten Code und die 'counterhelper'-Factory) – Lihini

Antwort

3

Problem hier ist der Controller außerhalb der Schaltfläche ist daher ist es nicht der Controller angeschlossen zu erkennen, wickeln Sie es in einem div

<div ng-controller = 'cssCtrl'> 
    <h1 ng-click='increment()'> 
    {{display}} 
    </h1> 
    <button ng-click = 'increment()' >Increment</button> 
</div> 
Verwandte Themen