Angular.js - 컨트롤러 통신에 대한 지침

Question

나는 각도가 너무 새롭기 때문에 이해 부족이라고 변명하십시오.

컨트롤러의 x 위치를 추적하고 컨트롤러에서 일부 논리를 수행 할 수 있도록 "draggable"이라는 지시문이 있습니다. 사용자가 요소 (스틱 그림)를 오른쪽으로 드래그하면 추가적인 스틱 그림이 그 바로 뒤에 나타납니다. 컨트롤러는 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

당신은 지시와 서비스를 통해 컨트롤러간에 통신 할 수 있습니다. 지시문은 매개 변수를 통해 컨트롤러의 범위 변수에 액세스 할 수도 있습니다. 하나의 방법으로 @ 접두사

그냥 텍스트로

• = 바인딩 두 베이와 & 접두어로
• 바인딩 : 당신은 당신의 필요에 따라 다른 방법으로 변수에 액세스 할 수 있습니다 접두사

체크 아웃 지침에 대한이 우수한 article, 특히 범위 섹션

이 지시문 I에서보세요 그것은 jQuery의 드래그 단지 당신처럼 주위에 단지 래퍼 만든, 어쩌면 당신은 몇 가지 아이디어를 얻을 수 있습니다 : 컨트롤러가 드래그 지침에서 x의 업데이트 된 값을 따기되지 않은 이유는

angular-draggable

Answer 2

했다 왜냐하면 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 3

체크인 내이 상위 컨트롤러와 지시어는 통신하는 방법에 대한 :)

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