2015-01-22 3 views
0

나는 다음과 같은 각도 및 HTML 파일이 있습니다데이터를 전달

var app = angular.module("directiveApp", []) 
 

 
app.directive("directiveone", function(){ 
 
\t return{ 
 
\t \t restrict: "E", 
 
\t \t template:'<div><input type="text" ng-model="textOne"></div>' 
 
\t }; 
 

 
}); 
 

 
app.directive("directivetwo", function(){ 
 
\t return{ 
 
\t \t restrict: "E", 
 
\t \t template:'<div><input type="text" ng-model="textTwo"></div>' 
 
\t }; 
 

 
}); 
 

 
app.directive("directivethree", function(){ 
 
\t //display textOne and textTwo in the template of this directive. 
 
})
<!doctype html> 
 
<html ng-app="directiveApp"> 
 
<head> 
 
\t <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
 
\t \t <script src = "directiveApp.js"></script> 
 
</head> 
 
<body> 
 
<directiveone></directiveone> 
 
<directivetwo></directivetwo> 
 
</body> 
 
</html>

내가 NG-모델 textOne 및 textTwo에 삽입 된 값을 인쇄 할을 directivethree를 사용합니다. 이 두 지시어의 데이터를 전달하고 인쇄 할 수 있습니까? 당신의 지시어는 범위를 가지고 있겠지 때문에

답변

0

, 모든 변수가 공유됩니다 그래서 당신은 간단하게 할 수 있습니다 귀하의 지시어 '같은 장소'가 될 때까지

app.directive("directivethree", function(){ 
    return{ 
     restrict: "E", 
     template:'<div>{{textOne}}{{textTwo}}</div>' 
    }; 

}) 

이 작동, 즉 유 NG 내부 중 하나를 넣을 경우 다시 말해서 모든 지시어에 매개 변수를 추가하는 것이 더 나은 이유는 지시어 1을 한 곳에서, 지시어 2를 다른 지시어로, 지시어 3을 사용하는 것입니다. http://plnkr.co/edit/8KFQGsq6hxVwrdtGnW1g?p=preview

+0

제안 해 주셔서 감사합니다. 코드의 출력 결과는 { "a": "textBox1", "b": "textBox2"}와 유사합니다. 텍스트 상자에 입력 된 값이 아닌 관련 객체를 jus에 인쇄 할 수 있습니까? – Anvith

+0

그것을 알아 냈어 .. 고마워. :) – Anvith

0

항상 ng-model에 점을 찍고 싶습니다. 즉, 프리미티브가 아닌 객체를 사용하십시오.

이렇게하면 상속을 사용하여 앱의 다양한 부분에서 데이터를 공유하는 것이 매우 쉽습니다. 이것은 각도 범위 작업에있어 매우 중요한 부분입니다.

지시어 전체에서 공유하는 경우 컨트롤러의 모든 범위가 동일한 경우 지시문의 격리 된 범위가없는 한 이미 그 범위를 공유합니다.

다른 컨트롤러 범위에 있거나 격리 된 범위가있는 경우 서비스를 사용하여 개체를 저장하고 필요한 경우 해당 서비스를 주입하십시오. 변수에 객체가 할당되면 객체는 복사되지 않으며 해당 객체에 대한 참조 일뿐입니다. 따라서 앱 내의 여러 변수에 동일한 객체를 할당하면 모두 함께 바인딩됩니다.