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

Аз съм много нов в angular, така че моля да ме извините за липсата на разбиране.

Имам директива, наречена "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>

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 от директивата за плъзгане, беше поради мястото, където се актуализира стойността на 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, точно като вашата, може би можете да получите някои идеи:

angular-draggable

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