AngularJs의 스코프 및 지시문

Question

저는 AngularJs에 아주 익숙하며, 나 자신에게 도전 할 수있는 작은 응용 프로그램을 만들고 있습니다.

이것은 처음에는 매우 간단합니다. 여러 기준을 선택하고 선택한 기준에 따라 값을 선택하여 나중에 데이터를 필터링 할 수 있기를 바랍니다. 따라서 "criterion-value"커플 어레이를 나중에 서버로 보내도록 유지하려고합니다. plunker

모든 "선택"지시어가 서로에 따라되는 버그는 ... 나는 문제가 모델 변수의 범위에서 온다 알고있다 "

내가 지금까지했던 모든이에 selectedValue "및"selectedCriterion "은 모든 지시문에서 공유되지만"_new_criterion "클래스에 속하는 div에 로케일을 만들고 동시에 allChoices 배열에 액세스하는 방법은 무엇입니까?

또한 어떻게 내 "allChoices"개체 내가이 이것을 달성 할 수있는 적절한 방법인지 몰라

[ 
    { 
     criterion : "CITY", 
     value : "San Francisco" 
    }, 
    { 
     criterion : "COMPANY", 
     value : "Something" 
    } 
] 

같은 것을 가지고 채울, 그래서 다른 솔루션을 제안 자유롭게한다. 실제 사례 데이터, 값 배열에 많은 관심을 지불하지 평안 페치 :

var app = angular.module('app', []); 
angular.module('app').controller('MainCtrl', function($scope, $compile) { 
    $scope.allCouples = []; 

    $scope.add = function(ev, attrs) { //$on('insertItem',function(ev,attrs){ 
    var criterionSelector = angular.element(document.createElement('criteriondirective')); 
    var el = $compile(criterionSelector)($scope) 
    angular.element(document.body).append(criterionSelector); 
    }; 
}); 


app.directive('criteriondirective', function($compile) { 
    return { 
    template: '<div class="_new_criterion"><select ng-model="chosenCriterion" ng-change="chooseCriterion(chosenCriterion)" ng-options="criterion.columnName for criterion in criteria" class="form-control"></select></div>', 
    restrict: 'E', 
    replace: true, 
    transclude: false, 
    compile: function(tElement, tAttrs, transclude) { 
     return function(scope, element, attr) { 
     scope.chooseCriterion = function(sel) { 
      var valueSelector = angular.element(document.createElement('valuedirective')); 
      var el = $compile(valueSelector)(scope); 
      tElement.append(valueSelector); 
     }; 

     //rest call to get these data 
     scope.criteria = [{ 
      columnName: 'turnover', 
      type: 'range' 
     }, { 
      columnName: 'city', 
      type: 'norange' 
     }, { 
      columnName: 'company', 
      type: 'norange' 
     }]; 
     }; 
    } 
    }; 
}); 

app.directive('valuedirective', function() { 
    return { 
    template: '<select ng-model="chosenValue" ng-options="value for value in values" ng-change="chooseValue(chosenValue)" class="form-control"></select>', 
    restrict: 'E', 
    replace: true, 
    transclude: false, 
    compile: function(tElement, tAttrs, transclude) { 
     return function(scope, element, attr) { 
     scope.chooseValue = function(sel) { 
      //I would like to register the couple "criterion-value" into the array allCouples how to pass the criterion as parameter to this directive ? 
      // scope.allCouples.push({criterion : "criterion", value : "value"}); 
     }; 

     //Rest call to get these data 
     scope.values = ["Paris", "San Francisco", "Hong-Kong"]; 
     }; 
    } 
    }; 
}); 

가 대단히

PS 감사 : 여기

앱의 소스 코드의 샘플입니다

Answer 1

지시문 중 isolate the scopes이 동일한 데이터를 공유하고 변경할 때 유용 할 수 있습니다. 예를 들어 scope: true,으로 시도해보십시오.