Angular.js - 控制器通信指令

Question

我很有棱角，所以請原諒我缺乏理解。

我有一個名為“draggable”的指令，我希望能夠在控制器中跟蹤它的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>

Answer 1

控制器沒有從draggable指令中獲取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;});
                }
            });
        }
    };
});

Answer 2

您可以通過服務在指令和控制器之間進行通信。 指令還可以通過參數訪問控制器的范圍變量。 您可以根據需要以不同方式訪問變量：

• 只是帶有@前綴的文本
• 使用單向綁定＆前綴
• 使用帶有=前綴的兩個托架綁定

查看這篇關於指令的優秀文章 ，尤其是范圍部分

看看我制作的這個指令，它只是像你一樣的jQuery可拖動的包裝器，也許你可以得到一些想法：

角可拖動

Answer 3

檢查我的這個父控制器和指令如何通信:)

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