AngularJS: $ scope не обновляется после функции

Я хочу обновить номер в контроллере. Поэтому у меня есть контроллер с этим.

$scope.someNumber = 5; 

$scope.addNumber = function(){ 
    $scope.someNumber ++; 
    console.log($scope.someNumber); // This outputs 6, 7, 8, etc 
}

Затем я показываю это число, и оно работает, когда я обновляю страницу.

<span ng-controller="myController">{{someNumber}}</span>

Теперь я хочу назвать addNumber(), когда я нажимаю что-то. Этот div находится внутри некоторого кода, который повторяется с ng-repeat.

<div ng-click="addNumber()">Add +1!</div>

Щелчок работает, потому что addNumber() выводит правильный новый номер. Но по какой-то причине span не обновляется с новым значением и всегда показывает 5. Я позвонил $scope.$apply(), но я получаю $apply already in progress error.

Я новичок в Angular, я думаю, я должен упустить что-то очень очевидное.

Edit:

Я добавил нажмите на пролете, и теперь он обновляется.

<span ng-controller="myController" ng-click="addNumber()">{{someNumber}}</span>

Что это значит?

источник

2015-03-26 Pier

Покажите нам больше кода. Возможно, у вас есть проблема с вашей иерархией областей. – doldt

Можете ли вы показать мне результат в плункере? –

Попробуйте использовать «ng-bind» для someNumber –

Я предполагаю, что вы делаете неправильно (но не уверен, так как у меня нет всего вашего кода), у вас нет вашего контроллера вокруг вашего полного html-кода.

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

<body ng-controller="MainCtrl as vm"> 
    <p>Hello {{vm.someNumber}}!</p> 
    <div ng-click="vm.addNumber()">Add +1!</div> 
    </body>

И Javascript код:

app.controller('MainCtrl', function() { 
    var vm = this; 
    vm.someNumber = 5; 
    vm.addNumber = addNumber; 

    function addNumber(){ 
    vm.someNumber++; 
    } 
});

See this Plunker

источник

2015-03-26 07:34:31 CodeBreakers

Это адский код !!! Вы добавили только дополнительные коды. –

Я пробовал это, консоль выводит номер правильно, но диапазон не обновляется. – Pier

Какая версия AngularJS вы используете? Вы попробовали Plunker с примером? Этот работает для меня, поэтому код должен работать, если в вашем коде есть какая-то другая проблема. Можете ли вы предоставить полный код в Plunker, например? – CodeBreakers

<div ng-controller="myController"> 
<span>{{someNumber}}</span> 
<div ng-click="addNumber()">Add +1!</div> 
</div> 

$scope.someNumber = 5; 

$scope.addNumber = function(){ 
    $scope.someNumber ++; 
    console.log($scope.someNumber); // This outputs 6, 7, 8, etc 
}

источник

2015-03-26 07:42:56 SuperComupter

Я сделал что-то подобное, и оно работает. Почему это? – Pier

вы не можете положить нг контроллер внутри диапазона тега и вызова функции вне вам нужно указать часть HTML, когда внутри Wich контроллера

Add +1!

– SuperComupter

Я переместил нг-контроллер для родительского элемента с тем же результатом. – Pier

Ваш код работает хорошо для моей стороны

Js кода

$scope.someNumber = 5; 

    $scope.addNumber = function() { 
     $scope.someNumber++; 
     console.log($scope.someNumber); // This outputs 6, 7, 8, etc 
    }

HTML код

<span ng-controller="myController">{{someNumber}} 
    <div ng-click="addNumber()">Add +1!</div> 
    </span>

Ваш весь HTML код следует использовать с внутренней стороны контроллера. Просто скопируйте и мимо моего кода

источник

2015-03-26 07:47:46

Он находится внутри моего контроллера, и доказательство состоит в том, что если я нажму на div, я получу правильный номер на консоли. – Pier

Я не уверен, что проблема была, но я ее решил, перемещая ng-controller директиву к HTML элемент родительского, который содержит как span, где я хочу, чтобы показать номер и div с директивой ng-click.

источник

2015-03-26 08:01:41 Pier

Это то, что вам все говорили ... – Yoshi

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

Я понимаю это. Тем не менее, люди говорили вам, что вам нужно иметь код контроллера ('addNumber') * внутри * объема этого контроллера.В html-терминах «как ребенок общего родителя», а не как брат. Просто помогите себе в будущем, разместив * весь * соответствующий код внутри quesiton. Тем не менее, также советуем CodeBreakers о том, чтобы не использовать '$ scope'. Он будет устаревшим в будущих версиях. – Yoshi

Просто глядя на это, я думаю, что вы кладете функцию обновления за рамки вашего контроллера:

<div ng-controller="FooController">{{value}}</div> 
<span ng-click="update()"></span>

Принимая во внимание, что вам нужно поместить функцию обновления в пределах контроллера:

<div ng-controller="FooController">{{value}} 
    <span ng-click="update()"></span> 
</div>

Надеюсь, что это поможет!

источник

2015-03-26 08:17:34 Mikebert4

AngularJS: $ scope не обновляется после функции

ответ

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