부모에서 각도 명령문을 실행할 때 문제가 발생했습니다.

Question

지시어 안에 지시문이 있으므로 child 지시문을 사용하여 부모 메서드를 호출해야합니다. 나는 데이터를 전달하는 데 약간의 어려움을 겪고 있으며, 생각을 가지고 있을지도 모른다고 생각했다.

다음은 설정입니다 :

내 부모 지시어는 screener-item라고합니다. 우리 아이 지시어는 option-item입니다. screener-item 안에는 n option-item이있을 수 있으므로 동적으로 추가됩니다. (기본적으로,이 동적으로 구축 드롭 다운 생각 : 사용자가 그것에게 다음 제목, 사용 가능한 옵션 세트 제공) :

screener-item.directive.js

angular.module('recruitingApp')                        
    .directive('screenerItem', function(Study, $compile) {                 
    return {                            
     templateUrl: 'app/new-study/screener-item/screener-item.html',              
     scope: {                           
     study: '='                          
     },                             
     link: function(scope, el, attrs) {                     
     var options = []; 

     scope.addOptionItem = function(item) {                   
      options.push(item);                                        
     }  

     scope.saveScreenerItem = function() {                   
      if (scope.item._id) {                       
      var isEdit = true;                       
      }                            
      Study.addScreenerQuestion({id:scope.study._id},{                
      _id: scope.item._id,                       
      text: scope.item.text,                      
      type: scope.item.type                      
      }, function(item){                        
      scope.mode = 'show';                       
      scope.item._id = item._id;                     
      if (!isEdit) {                        
       el.parent().append($compile('<screener-item study="newStudy.study"></screener-item')(scope.$parent));  
      }                           
      });                           
     }                            
     }                             
    }                             
    }); 

screener-item.html

다음

이이 설정 방법을

<div class="screener-item row" ng-hide="mode == 'show'">                 
    <div class="col-md-8">                         
    <input type="text" placeholder="Field (e.g., name, email)" ng-model="item.text">          
    </div>                             
    <div class="col-md-3">                         
     <select ng-model="item.type">                      
     <option value="text">Text</option>                     
     <option value="single_choice">Single Select</option>                
     <option value="multi_choice">Multi Select</option>                 
     </select>                           
     <div ng-show="item.type == 'single_choice' || fieldType == 'multi_choice'">           
     <h6>Possible answers:</h6>                       
     <option-item item-options="options" add-option-item="addOptionItem(value)"><option-item>       
     </div>                            
    </div>                             
    <div class="col-md-1">                         
     <button ng-click="saveScreenerItem()">Save</button>                 
    </div>                             
    </div>                             
    <div class="screener-item-show row" ng-model="item" ng-show="mode == 'show'">           
    <div class="col-md-8">{{item.text}}</div>                    
    <div class="col-md-3">({{item.type}})</div>                   
    <div class="col-md-1">                         
     <a ng-click="mode = 'add'">edit</a>                     
    </div>                             
    </div> 

중간에 포함되어있는 option-item에 주목하십시오. 이것이 사용자에게 제공되는 초기 옵션입니다. 이것은 사용자가 필요로 할 때 반복 될 수 있습니다. 사용자가, 나에 addItem(), 메소드를 호출 할 option-item 텍스트 상자에 값을 입력하고 저장하면 다음과 같습니다

<div ng-show="mode == 'add'">                       
    <input type="text" ng-model="value">                     
    <button ng-click="addItem(value)">Save</button>                  
</div>  

option.item.directive.js

angular.module('recruitingApp')                        
    .directive('optionItem', function($compile) {                    
    return {                            
     templateUrl: 'app/new-study/screener-item/option-item.html',               
     scope: {                            
     addOptionItem: '&'                         
     },                             
     link: function(scope, el, attrs) {                     
     scope.mode = 'add';                         
     scope.addItem = function(value) {                     
      console.log("Value is ", value);                     
      scope.addOptionItem({item:value});                    
      scope.mode = 'show';                        
      var newOptionItem = $compile('<option-item add-option-item="addOptionItem"></option-item')(scope);    
      el.parent().append(newOptionItem);                    
     }                             
     }                              
    }                              
    }); 

option-item.html 내가 어떻게 할거야 option-item 지시문 그런 다음이 메소드는 상위 메소드 (addOptionItem())를 호출하여 값을 전달합니다.이 값은 상위에 보관 된 배열로 푸시됩니다 (이 배열은 추가 된 모든 옵션을 추적합니다).

부모 메소드를 실행할 수는 있지만, 내게는 값을 전달할 수 없습니다. 매번 undefined으로 나타납니다.

부모에게 직접가는 대신 option-item 메서드를 호출하려고하므로 필요한 경우 유효성 검사를 수행 할 수 있으므로 항목을 추가하면 현재 option-item을 동적으로 추가 할 수 있습니다.

이것이 의미가 있기를 바랍니다. 이것이 끔찍하게 불분명 한 경우 알려 주시기 바랍니다.

감사합니다.

편집 : 당신이 옵션을 추가 할 때, 부모의 옵션의 로그 아웃 배열이 정의되지 않은 것을 http://jsfiddle.net/y4uzbapz/1/가

참고 : 여기의 jsFiddle가 있습니다.

Answer 1

이 작업이 수행되었습니다. 모든 자습서에서는 자식 컨트롤러를 본질적으로 우회하여 ng-click에있는 부모 메서드를 호출하여이 작업을 수행합니다. 하지만 부모에게 값을 전달하기 전에 유효성 검사를 수행해야하는 경우 하위 지시문에 대해 메소드를 호출 한 다음 해당 호출 내에서 상위 지시문의 메소드를 호출해야합니다.

밝혀졌습니다. 표현식을 ng-click 안에 넣는 것과 같은 방법으로 액세스 할 수 있습니다. ng-click 핸들러가 부모 지시어의 메소드를 호출 자식 지침에 실제로 것을 http://jsfiddle.net/y4uzbapz/3/

주의 사항 :

다음은이 작업을 보여주는 바이올린입니다. 이렇게하면 해당 데이터에 대해 사전/사후 처리를 수행 할 수 있습니다. 부모 지시문을 직접 ng-click에서 호출하면 할 수 없습니다.

어쨌든 케이스가 닫혀 있습니다.