Директива Angular.js для связи с контроллером

Я очень новичок в angular, поэтому, пожалуйста, извините мое непонимание.

У меня есть директива под названием «перетаскиваемый», которую я хочу иметь возможность отслеживать позицию 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>

angularjs angularjs-directive jquery-draggable angularjs-scope
person Wesley Yee    schedule 17.10.2013    source источник
comment
В чем именно заключается ваш вопрос? Как взаимодействуют директива и контроллер? Может быть, вам следует явно заявить о своих сомнениях, чтобы мы могли помочь.   -  person Julian    schedule 17.10.2013
comment
Хорошо, код, который я разместил, в настоящее время не работает. Я также хотел бы знать, как директива должна взаимодействовать с контроллером. Должен ли я использовать услугу?   -  person Wesley Yee    schedule 17.10.2013

Ответы (3)


arrow_upward
6
arrow_downward

Причина, по которой контроллер не получал обновленное значение x из директивы draggable, заключалась в том, где обновляется значение 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;});
                }
            });
        }
    };
});
person Wesley Yee    schedule 17.10.2013

arrow_upward
5
arrow_downward

Вы можете общаться между директивой и контроллером через службу. Директива также может получить доступ к переменным области действия контроллера через параметры. Вы можете получить доступ к переменным различными способами, в зависимости от ваших потребностей:

  • Просто текст с префиксом @
  • С односторонней привязкой с префиксом &
  • С двухсекционной привязкой с префиксом =

Прочтите эту прекрасную статью о директивах, особенно о сфере их применения. раздел

Взгляните на эту директиву, которую я сделал, это просто оболочка для перетаскивания jQuery, как и у вас, может быть, вы можете получить некоторые идеи:

угловое перетаскивание

person Julian    schedule 17.10.2013

arrow_upward
0
arrow_downward

Проверьте это, чтобы узнать, как родительский контроллер и директива взаимодействуют :)

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

person Tushar Pandya    schedule 24.12.2014