2014-09-09 3 views
0

AngularJS 앱에서 작업하고 있습니다. 내 애플 리케이션을 통해 사용하는 재사용 가능한 구성 요소를 작성하려고합니다. 데모를 위해 텍스트 상자 만 사용합니다. 내 attempt here의 바이올린을 만들었습니다. 기본적으로,이 같은 컨트롤을 사용하려고 해요 :부모 컨트롤러에 AngularJS 지시어 값 공개

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <my-control textValue="{{controlValue}}"></my-control> 
     <br /> 
     You entered: {{controlValue}} 
    </div> 
</div> 

불행하게도, 내가 컨트롤러의 범위와 지침의 범위 사이에 속성을 바인딩하는 방법을 알아낼 수 없습니다. my fiddle에서 내가 뭘 잘못하고 있는지 잘 모르겠습니다. 누군가 내가 뭘 잘못하고 있는지 말해 줄 수 있습니까?

감사합니다.

답변

0

당신은 지금까지 아니었지만, {{}}

중괄호 제거를 사용하고 텍스트 값 속성에 대한 camelNotation 사용하지 않는 경우에 당신은주의 하시고해야합니다

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <my-control text-value="controlValue"></my-control> 
     <br /> 
     You entered: {{controlValue}} 
    </div> 
</div> 

ng-model 속성 사용 :

angular.module('ui.directives', []).directive('myControl', 
    function() { 
    return { 
     restrict: 'EAC', 

     scope: { 
      textValue: '=' 
     }, 
     template: '<input type="text" ng-model="textValue"></input>' 
    }; 
    } 
); 
1

격리 된 범위로 지시문을 만들었으며 격리 범위에서 값을 인쇄하려고합니다. 그것은 당신이 고립 scope없이,이 같이 당신의 지시를 쓸 수 있습니다, 바로되지 않습니다 :

당신이 고립 범위를 설정 지시어를 원하는 경우
return { 
     restrict: 'EAC', 

     template: '<input type="text" ng-model="controlValue"></input>' 
    }; 

, 당신은 변경 $ 할 일을 감시 사용 후 범위를 분리해야

관련 문제