Angular JS: attribute not influenced by $scope...?

Question

Angular newbie here. I have the following div:

<div id="mainfr" data-curpos="dy[ {{curPosObj.dy}} ]" ...>blah blah </div>

And in my controller I have:

var nxtest = angular.module('nxtest', []);
var appController = nxtest.controller('AppCtrl', ['$scope', function ($scope) {
    $scope.curPosObj = { dir: "down", dy:5 };
    $scope.clr = window.setTimeout(function(){ $scope.curPosObj.dy = 777;
window.clearTimeout($scope.clr); }, 5000); //see if the attr responds to a random change
}])

In firebug, inspecting the scope object shows that it is indeed modified. I want to understand why the bound attribute {{curPosObj.dy}} is not 'bound' and the view does not respond to the changing values? Thanks very much in advance.

Update: added link to plunker as suggested - the red text never changes: http://plnkr.co/edit/HJxEpgR8VepxuT47zJDJ?p=preview

Update 2: OK so there may be a separate issue here - the red text is in a pseudo element whose contrent attribute depends on the main divs attribute... and I'm not calling setAttribute anywhere... but regardless: in firebug, the 'data-curpos' attribute itself is NOT updating, never mind the pseudo elem that depends on it...

What is curpos? Is that an Angular directive? Can you provide a runnable sample / Plunker? — JeffryHouser
– JeffryHouser, Commented Jul 26, 2014 at 18:02
it's just a random object I made up, with random values just to check data binding. I'm going to try plunkering it (never tried before)... — babyshark
– babyshark, Commented Jul 26, 2014 at 18:37

IUnknown · Accepted Answer · 2014-07-26 18:14:18Z

1

That's because angular doesn't tracking scope changes out of the dygest cycle and window.setTimeout that case. You should use the $timeout service instead of window.setTimeout or put code which chenge scope into $scope.$apply call

angularjs API reference - $timeout service

angularjs API reference - scope guide

try this:

var nxtest = angular.module('nxtest', []);
var appController = nxtest.controller('AppCtrl', ['$scope', '$timeout',
  function($scope, $timeout) {
    $scope.curPosObj = {
      dir: "down",
      dy: 5
    };
    $scope.clrPromise  = $timeout(function() {
      $scope.curPosObj.dy = 777;
    }, 5000); //see if the attr responds to a random change

} ])

answered Jul 26, 2014 at 18:14

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

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

2 Comments

babyshark Over a year ago

I can't get it to work for me :-( I'm going to read a bit more through the service and scope guides. Note: initially, I wasn't using timeouts... I had a directive that had a two-way binding with scope.curPosObj, and it was successfully modifying the scope (I checked the parent scope obj in firebug)... It just wasn't trickling through the bound attribute, so i nuked the directive and just randomly changed the values with a timeout. Eitherway, the attribute didn't update. Have to step out for a few hours, but will be back once I read through the API refs you mention. thanks!

IUnknown Over a year ago

Whar is the by? Is it some array defined in scope? If so, you need to interpolate whole expression: data-curpos="{{dy[curPosObj.dy]}}"

Collectives™ on Stack Overflow

Angular JS: attribute not influenced by $scope...?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related