2013-10-15 5 views
1

지시어가 서로 통신하도록하는 방법이 있습니다. 컨트롤러를 사용하여 수행 할 수 있습니다. 내 문제는 내가 업로드 응용 프로그램을 만들고있는 페이지에 2 개의 지시문을 가지고 있는데 파일 선택을 사용하여 파일 입력을 사용했는지 여부를 감지하는 파일 변경 지시문을 사용하고 드래그 앤 드롭을위한 드롭 존을 만드는 지시문입니다. 파일이 모두 작동합니다.각도 Js 다른 지시어가 범위 내에 있는지 감지하는 지시 통신

그러나 어떻게 내가 공장 출하 방식을 만든 페이지에서 dropzone 또는 filechange 지시어를 사용하는지 감지하고 배열에 데이터 서비스를 사용하여 지시문의 이름을 배열로 푸시 할 수있게하려면 어떻게해야합니까? 하지만 둘 다 페이지에 하나만 등록하는 경우에도합니까? 어떻게 해결할 수 있습니까? 비동기 문제입니까?

여기 여기 내 html로 내 uploader3.js

var app = angular.module("uploader", []); 
app.factory('data', function(){ 

return { 

    directives:[], 
    progressBarSet:false, 
    getData:function(){ 

     return this; 

    } 

    } 

}); 


app.directive("dropzone", ["data", function (data) { 

return { 

    restrict: "A", 
    controller: function($scope){ 

    }, 
    priority: 0, 
    link: function (scope, element, attr, ctrl) { 

     data.directives.push("dropzone");    
     console.log(data.directives); 
    } 

    } 

}]); 




app.directive("filechange", ["data", function (data) { 

return { 

    restrict: "A", 
    controller: function($scope){ 

    }, 
    priority: 1, 
    link: function (scope, element, attr, ctrl) { 

     data.directives.push("filechange");    
     console.log(data.directives); 
    } 

    } 

}]); 

입니다.

<!doctype html> 
<html ng-app="uploader"> 
<script src="Scripts/angular.min.js"></script> 
<script src="app/uploader3.js"></script> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body dropzone> 
    <input type="file" name="FILEDATA" id="FILEDATA" accept="image/jpg, image/jpeg" filechange> 
</body> 
</html> 

data.directives를 기록 할 때 길이가 1임을 나타냅니다. 푸시를 적용하고 두 지침을 모두 데이터 서비스에 등록하려면 어떻게합니까?

지시문이 실제로 페이지에 적용되고 있는지 파악하는 더 좋은 방법이 있습니까? 페이지에 dropzone 또는 file change 지시문을 구현했는지 또는 둘 다 사용하고 있는지에 따라 다음 코드 집합을 실행해야합니다.

답변

0

을하면 진행률 표시 줄이 필요하다고보고, 하나의 옵션은 선택적 (?^) dropzonefilechange을 필요로하는 별도의 ProgressBar 구성 지침을 만들 수 있습니다.

여러에 AngularJS directive controllers requiring parent directive controllers?이 필요합니다 : 그것은 당신의 아키텍처에서 의미가있는 경우 https://groups.google.com/forum/#!msg/angular/PZLxEKZUy5k/M1_JKF84-MEJ

이 당신에게 책임 멋진 분리를 줄 수있는이 경로를 이동하는 경우

여기이 상황에서 통신에 대해 설명 뭔가.

당신은 또한 당신의 질문을 해결하지 않는이 구현을 체크 아웃 할 수없는, 그러나 ProgressBar 구성 지시어 내부에 유용 할 수 있습니다 경우 : http://victorbjelkholm.github.io/ngProgress/

0

"필수"속성을 사용하십시오. 지시어가 다른 지시문을 "요구"한다고 말하면, 첫 번째 지시문은 다른 지시문 없이는 작동하지 않습니다.

+0

내가하려고 서로 독립적으로 작동하도록해야합니다 가능한 한 모듈 식으로 유지하십시오. 검색의 이유는 진행 표시 줄을 추가해야하지만, 그렇지 않으면 페이지에 여러 개가있을 것입니다. 따라서 기본적으로 지시문이 존재하면 다른 하나도 페이지에 있는지 확인하여 하나의 진행률 표시 줄 만 페이지에 적용되는지 확인하십시오. – Jesse

+0

$ 범위를 붙이려고했습니다.컨트롤러에 대한 지시어와 그 중 하나를 표시하는 변수를 기록 할 때 어떤 이유로 든 작동하지 않았다. – Jesse

+0

지시어에 문제가 있다고 생각하는데, 아마도 변수를 변경하려고 시도했지만 변수는 filechange 데이터에 등록했지만 dropzone 하나는 그렇지 않습니다. 아마 변수와 같은 시퀀스 문제가 제가 참조하려고 할 때 설정되지 않았습니까? 나는 "데이터"서비스를 로그 아웃했다 "filechange는 존재하지만 dropzone은"이 아니다. – Jesse

0

어디서든 지시어 배열을 인스턴스화하지 않았기 때문에 생각합니다. 서비스에서 호출 할 때 빈 배열을 반환하고 지시문을 삽입합니다.

이 시도 :

var app = angular.module("uploader", []); 
    app.factory('data', function(){ 

    var directives = []; 

    return { 
    directives: function() { 
     return directives; 
    }, 
    progressBarSet:false, 
    getData:function(){ 

     return this; 

    } 

    } 

}); 
+0

그것이 작동하는지 나는 시험해 볼 것이다. 내 "filechange"지시문은 등록 중이지만 "dropzone"지시문은 등록되지 않습니다. 왜 그런 일이 일어 났는지 모르겠지만 웹 속성 검사기에서 드릴 다운 할 때 var에 등록 할 때 두 태그를 모두 참조하려고 할 때? 범위 문제입니까? – Jesse

관련 문제