angularjs: scope value doesn't get updated in view

Question

there are buttons in detail.html file:

<div ng-controller="test.views.detail">
<div data-ng-repeat="item in details"  scroll>
    <button ng-click="showDetails(item)">The details</button>

in detail.js file

angular.module('test')
.controller('test.views.detail', function($scope) {

    $scope.detailsClicked = false;

    $scope.showDetails = function(item){
        $scope.detailsClicked = true;
    }....

in formDetail.html code:

<div ng-controller="test.views.detail">
{{detailsClicked}}
<div ng-if="detailsClicked">...

Initially it shows false for detailsClicked, when I click on button it goes to showDetails function but value of $scope.detailsClicked never get updated! It is straight forward not sure why it doesn't work:(

I think it is because there is an additional scope introduced with ng-repeat. — Mike Cheel
– Mike Cheel, Commented Feb 9, 2015 at 0:11
If you use the ControllerAs syntax instead you should be able to get away with it but to be honest I haven't done Angular in a little while so am a little rusty (but I still remembered this so...). I think the ControllerAs will allow you to specifically refer to the controllers detailsClicked property and so angular will know what to do (I think) =P. — Mike Cheel
– Mike Cheel, Commented Feb 9, 2015 at 0:15
Have you tried moving $scope.detailsClicked to $scope.obj = { detailsClicked: false};? It's best practice to 'always have a dot in bindings' in earlier versions of angular. — Jim Schubert
– Jim Schubert, Commented Feb 9, 2015 at 0:17
There are two instances of the test.views.detail controller - one in formDetail.html and the other in detail.html. If you want to share state betweeen the two instances, create a service that'll hold the state or use state params if you're using ui-router. — Brad Barber
– Brad Barber, Commented Feb 9, 2015 at 0:59

yangli-io · Accepted Answer · 2015-02-09 03:06:49Z

3

This is because you're using the same controller at two places and expecting the scope object to be the same which it is not. Everytime you call ng-controller in your markup a new scope object will be created. If you want them to be based off the same data then use a service.

Here is an example

app.controller('test.views.detail', function($scope, detailsClicked) {

    $scope.detailsClicked = detailsClicked;

    $scope.showDetails = function(item){
        $scope.detailsClicked.isClicked = true;
    }
});

Create a factory/service which will retain the data, make sure the data is a

app.factory('detailsClicked', function(){
  var data = {
    isClicked: false
  }

  return data;
});

answered Feb 9, 2015 at 3:06

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs: scope value doesn't get updated in view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related