Angular ng-bind not updated when value changes

Question

I want to bind the content of a span element (that is the current position of the element).

Problem: when I change the element position, angular doesn't update the value of the ng-bind attribute.

This is my html:

!doctype html>
<html lang="en" ng-app="exempleApp">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery2.1.4.js"></script>
  <script src="jquery-ui.js"></script>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="exempleApp.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
   .movable { width: 150px; height: 150px; padding: 0.5em; background-    color: green;}
  </style>


  <script>
  $(function() {
    $( ".movable" ).draggable(
      {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            var thisId = $(this).attr('id');
            $('#' + thisId + ' .posX').text(xPos);
            $('#' + thisId + ' .posY').text(yPos);
        }
      }
    );
  });
  </script>

</head> 
<body ng-controller="imgController as ctrl">

<div id="1" class="ui-widget-content, movable" >
  <p>Drag me around</p>
  <span class="posX" ng-bind="ctrl.presentation.images[0].posX"></span>
  <span class="posY" ng-bind="ctrl.presentation.images[0].posY"></span>
</div>

<div id="2" class="ui-widget-content, movable" >
  <p>Drag me around</p>
  <span class="posX" ng-bind="ctrl.presentation.images[1].posX"></span>
  <span class="posY" ng-bind="ctrl.presentation.images[1].posY"></span>
</div>

<div >
  <span ng-bind="ctrl.presentation.images[0].posX"></span>
  <span ng-bind="ctrl.presentation.images[0].posY"></span>
</div>

</body>
</html>

And this is my exempleApp.js:

(function() {
    var app = angular.module("exempleApp", []);

    app.controller('imgController', function(){
        this.presentation = pres;
    });

    var pres = { 

        images: [
            {
                posX: "0",
                posY: "0"
            },
            {
                posX: "0",
                posY: "0"
            }
        ]
    };  

})();

Thanks for the help

{{ctrl.presentation.images[1].posX}} does not fulfilyour needs ? — jbigman, May 06 '15 at 12:11
I think the problem is that your presentation or pres object doesn't change. `posX` and `posY` remain the same (0). It might be better to have the array be the images themselves instead. That way when bind reads `ctrl.presentation.images[1].posX` it gets the attribute of the image. Or - you need to update the `presentation.images[0].posY` and `presentation.images[0].posX` when they are dragged. — gin93r, May 06 '15 at 13:58
I may have misunderstood your question. It's my understanding that `ng-bind` binds the value of the html to the value of the object. That is, it's going to read the value from the object, not set it. So when the object changes, the html gets updated. Not the other way around. — gin93r, May 06 '15 at 14:03

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

https://docs.angularjs.org/api/ng/directive/ngBind

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

Try this:

<span class="posX">{{ctrl.presentation.images[1].posX}}</span>

Full explanations Databinding in AngularJS

edited May 23 '17 at 10:26

Community

1
1

answered May 06 '15 at 14:54

jbigman

1,200
11
24

score 1 · Accepted Answer · answered May 14 '15 at 21:55

I may have misunderstood your question. It's my understanding that ng- bind binds the value of the html to the value of the object. That is, it's going to read the value from the object, not set it. So when the object changes, the html gets updated. Not the other way around.

@Veo

score 0 · Answer 3 · answered May 19 '15 at 07:40

<p>drag.html</p>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dragger</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <script src="js/angular.js" type="text/javascript"></script>
    <script src="js/drag.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
<style>
   .movable { width: 150px; height: 150px; padding: 0.5em; background-    color: green;}
  </style>
<body ng-app="exempleApp">  
<div ng-controller="imgController">
    <div id="1" class="ui-widget-content movable" drag>
        <p>Drag me around</p>
        <span class="posX">{{presentation.images[0].posX}}</span>
        <span class="posY">{{presentation.images[0].posY}}</span>
    </div>

    <div id="2" class="ui-widget-content movable" drag>
        <p>Drag me around</p>
        <span class="posX">{{presentation.images[1].posX}}</span>
        <span class="posY">{{presentation.images[1].posY}}</span>
    </div>

    <div>
        <span>#1 .movable = </span>
        <span ng-bind="presentation.images[0].posX"></span>
        <span ng-bind="presentation.images[0].posY"></span>
    </div>
    <div>
        <span>#2 .movable = </span>
        <span ng-bind="presentation.images[1].posX"></span>
        <span ng-bind="presentation.images[1].posY"></span>
    </div>
</div>

    <script>
        $(function() {
            $( ".movable" ).draggable();
        });
    </script>

</body>
</html>

<p>drag.js</p>

    var app = angular.module("exempleApp", []);

    app.controller('imgController', function($scope){
        $scope.presentation = pres;
    });

    app.directive('drag', function(){
        return {
            link: function(scope, element, attrs){
                //initial position
                scope.presentation.images[attrs.id-1].posX = element.position().left;
                scope.presentation.images[attrs.id-1].posY = element.position().top;
                //position after drag
                element.on('drag', function(){
                    scope.presentation.images[attrs.id-1].posX = element.position().left;
                    scope.presentation.images[attrs.id-1].posY = element.position().top;
                    console.log(scope.presentation.images[attrs.id-1]);
                    scope.$apply();
                })
            }
        }
    })

    var pres = { 

        images: [
            {
                posX: "0",
                posY: "0"
            },
            {
                posX: "0",
                posY: "0"
            }
        ]
    }; 

<p>Note changes: - 1)created a drag directive.then apply it to div.movable. 
              2)initial position will give you position of draggable div on page load.
              3)scope.$apply(); plays important role here without this values will not be apply changes. for more information about $apply visit <a href="http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/">$apply</a>

<p>if you have any problems just ask me</p>

Angular ng-bind not updated when value changes

3 Answers3