Question

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

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

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

这是我的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"
            }
        ]
    };  

})();

感谢您的帮助

Answer 1

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

通常情况下，您不能直接使用ngBind，而是使用双重卷曲标记，如{{expression}}，类似但更少冗长。

试试这个：

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

完整解释Databinding in AngularJS

Answer 2

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

@Veo

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

值更改时，角度ng-bind未更新

3 个答案: