2016-09-02 3 views
1

Я немного новичок в угловом и имеющем проблему с проницательностью. Я пытаюсь обновить переменную, привязанную к div в моем контроллере, с помощью функции, вызываемой при нажатии кнопки. (Функция привязана к кнопке с помощью ng-click.) Когда я нажимаю кнопку, отображаемое значение не изменяется, даже если переменная изменена. Однако, если я назначу одну и ту же функцию обновления самому элементу, она изменится, когда я нажму на этот элемент. Может ли кто-нибудь объяснить? Вот мой код:Угловая JS двусторонняя привязка, не обновляющаяся при использовании кнопки

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; 
}) 

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

Спасибо!

+0

Dont использовать 'нг-контроллер =«cssCtrl'' внутри шаблона. –

+0

Я понимаю, что вы новичок, но попробуйте очистить свой код, прежде чем публиковать его в своем вопросе. Вы отправили много мертвого кода (ваш прокомментированный код и фабрика 'counterhelper') – Lihini

ответ

3

Проблема здесь ваш контроллер находится вне кнопки, следовательно, он не распознает контроллер прилагается, оберните его внутри DIV

<div ng-controller = 'cssCtrl'> 
    <h1 ng-click='increment()'> 
    {{display}} 
    </h1> 
    <button ng-click = 'increment()' >Increment</button> 
</div> 
Смежные вопросы