值更改时，角度ng-bind不会更新

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

我想绑定span元素的内容(即元素的当前位置)。

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

问题:当我更改元素位置时,angular不会更新ng-bind属性的值。

This is my html:

这是我的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:

这是我的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

谢谢您的帮助

3 个解决方案

#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.

通常,您不直接使用ngBind,而是使用类似{{expression}}的双卷曲标记,它类似但不那么冗长。

Try this:

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

Full explanations Databinding in AngularJS

完整解释AngularJS中的数据绑定

#2

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.

我可能误解了你的问题。我的理解是ng-bind将html的值绑定到对象的值。也就是说,它将从对象中读取值,而不是设置它。因此,当对象更改时,html会更新。不是相反。

@Veo

#3

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

#1