3

我对角度很陌生，所以请原谅我缺乏理解。

我有一个名为“可拖动”的指令，我希望能够在控制器中跟踪它的 x 位置并对其执行一些逻辑。当用户向右拖动元素（简笔画）时，其他简笔画应该直接出现在它的后面。控制器应该知道 x 位置并根据它的位置增加一个计数器，该计数器将指示在可拖动元素后面出现的棒图的数量。

此代码当前不起作用，因为控制器没有收到 x 的值。

我的指令：

app.directive('draggable', function() {
    return {
        restrict: 'A',
        scope: "=x",
        link: function (scope, element, attrs) {
            $(element).draggable({
                containment: "parent",
                axis: "x",
                drag: function(){
                    scope.x = $(this).offset().left;
                }
            });
        }
    };
});

我的控制器：

app.controller("main-controller", function($scope) {
    $scope.range = function(n) {
        return new Array(figures);  
    };
    $scope.$watch("x", function(){
        console.log($scope.x);
        figures = x / (stick_figure_height)
    });
});

我的 HTML：

<div class="human-slider" ng-controller="main-controller">
    <div draggable class="human-draggable">
        <img src="images/stickfigure.png"/>
    </div>
    <div ng-repeat="i in range()">
        <img src="images/stickfigure.png"/>
    </div>
</div>
4

3 回答 3

6

控制器没有从可拖动指令中获取更新后的 x 值的原因是因为 x 的值正在更新。X 在 angularJS 库（拖动事件处理程序）之外的方法中创建的轮流中更新。这个问题的解决方案是使用 $.apply 来更新绑定。

更新后的代码：

// Create our angular app
var app = angular.module('celgeneApp',[]);


// Main controller 
app.controller("main-controller", function($scope) {
    $scope.x = 0;
    $scope.figures = 0;
    $scope.range = function(n) {
        return new Array($scope.figures);  
    };
    $scope.$watch('x', function(){console.log($scope.x);});
});

// Draggable directive
app.directive('draggable', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
            $(element).draggable({
                containment: "parent",
                axis: "x",
                drag: function(){
                    // Need to use $apply since scope.x is updated 
                    // in a turn outside a method in the AngularJS library.
                    scope.$apply(function(){scope.x = element.offset().left;});
                }
            });
        }
    };
});
于 2013-10-17T19:02:27.683 回答
5

您可以通过服务在指令和控制器之间进行通信。指令还可以通过参数访问控制器的范围变量。您可以根据需要以不同的方式访问变量：

  • 就像带有 @ 前缀的文本一样
  • 使用带有 & 前缀的单向绑定
  • 带有 = 前缀的两个托架绑定

查看这篇关于指令的优秀文章，尤其是范围部分

看看我做的这个指令，它只是一个 jQuery 的可拖动的包装器，就像你的一样，也许你可以得到一些想法：

角度可拖动

于 2013-10-17T16:24:50.470 回答
0

检查我的这个父控制器和指令如何通信:)

http://plnkr.co/edit/GZqBDEojX6N87kXiYUIF?p=preview plnkr

于 2014-12-24T11:28:16.813 回答