중첩 범위 속성에 각도 쓰기

Question

내 응용 프로그램에 여러 개의 "입력란과 버튼"커플이 있습니다. 이 버튼은 텍스트 필드에 내용을 쓰는 대화 상자를 엽니 다.

[ input ] [ button ] ---> [ dialog (ok) (cancel) ] 

나는 Bootstrap.UI.Modal (https://angular-ui.github.io/bootstrap/#/modal)를 사용했습니다 그래서 그것을 처리하는 약속이 있습니다

//html 
<input ng-model="foo"/> 
<button ng-click="dialog('foo')"> Open </button> 

//controller 
modalInstance.result.then(
    function (selectedItem) { 
     $scope[ arg ] = selectedItem; 
    }, 
    ... 
); 

다 괜찮 작동합니다. (Demo) 문제는 내가 내 범위 객체의 중첩 된 속성에 액세스해야 할 때 온다 :

... 
<input ng-model="foo"/> 
<button ng-click="dialog('foo')"> Open </button> 
... 
<li ng-repeat="thing in model.nested.properties.of.unknown.level"> 
    ... 
    <input ng-model="thing.foo"/> 
    <button ng-click="dialog('???')"> Open </button> 
    ... 

내가 알고 싶은 것은 : 그것을 달성하기위한 가장 좋은 방법은 무엇인가?

• 가 돌아 콜백으로 범위 변수를 전달하지만, 그것은 단지 값이 아닌 참조를 가지고;

  는 지금까지 내가 시도 그래서 필드는 업데이트되지 않습니다. 입력 필드의 ID를 사용

  object = { 
      "one": function(){ $scope.a.b.c = ... }, 
      "two": function(){ $scope.d.e.f = ... }, 
      ... 
      // but this requires that I know in advance 
      // how many level I will nest into the $scope 
  } 
  

• 같은 콜백 목적을 제조 범위 계층

  dialog(["a","b","c"]) --> $scope[ "a" ][ "b" ][ "c" ] = output.value; 
  

• 에게 다시 문자열의 배열을 전달

  resolve: { 
      field: function() { 
       return $scope[ field ]; 
      } 
  } 
  

• 하면 너무 DOM에 직접 쓸 수있다. (그러나 이것은 anglejs에서 좋은 접근법이 아니다.)

  $("#input-abc...").val(...) 
  

• 사용 (uungh ...)

내가 첫 번째 해결책으로 최고의 하나가 될 것이라고 생각하지만, 어떻게 내 약속 콜백에 중첩 된 범위 요소의 참조를 전달할 수 평가 ? 이것을 달성하기위한 몇 가지 모범 사례가 있습니까? 제안 사항이 있으십니까?

Answer 1

이 치료에 중첩 된 구조, 그럴 수 간단한 패스 필드 이름 옆에 컨테이너 :

resolve: { 
    container: function() { 
     return thing; // thing would come from edit() parameter 
    }, 
    field: function() { 
     return fieldName; 
    } 
    } 

그리고 컨테이너 대신 범위에서 데이터를 액세스 할 수 있습니다. 이것은 가난한 사람 2-way 구속력이 될 것입니다.

단계 1) 당신이 ngModel를 사용하는 등, 2를 얻기 위해 범위를 지시어를 추가 : -

당신이 당신의 지시에 한 부분

또 다른 방법은 다음과 같이 될 것이다, 복용 결합 방법 :

scope: { 
    ngModel: '=' 
}, 

단계 2) 링크 파라미터 attr 추가를

link: function (scope, element, attr) 

3 단계)

resolve: { 
    field: function() { 
    return attr.external; 
    } 

4 단계) 모달이

scope.ngModel = output.selection; 

5 단계를 완료되면 ngModel에 새로운 데이터를 할당)이이처럼보기를 변경할보기에서 전달되는 데이터에 필드 해결합니다

<input type='text' ng-model='thing.value' external="{{thing.label}}"/> Value: {{thing.value}} 

바이올린 : http://plnkr.co/edit/hj6gOITk0rkHwPqSN9Tf?p=preview

Answer 2

가능한 경우 동일한 구조의 모든 데이터를 고려해 볼 것을 제안합니다. 따라서 모달 내의 조건에 대해 작업 할 필요가 없습니다.

는 심지어 하나의 제 1 및 제 2 :

난 당신이 약속에서 얻는 값을 설정하는 지침을 만들어 :

$scope.first = {label:'first',value:'initial value'}; 
$scope.second = {label:'second ', value:'initial value'}; 

는 plunker

Answer 3

나는 그것이 작동되도록 할 수있는 방법을 찾아 볼 요소의 val()에 직접.

.directive("external", function($modal){ 

return { 

    restrict: "A", 

    link: function (scope, element) { 

     element.bind("mousedown", function() { 

     var modalInstance = $modal.open({ 
      templateUrl: 'myModalContent.html', 
      controller: 'ModalInstanceCtrl', 
      resolve: { 
      field: function() { 
       return ""; 
      } 
      } 
     }); 

     modalInstance.result.then(function(output) { 
      element.val(output.selection); 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
     }); 
    } 
    }; 
}); 

이렇게하면 사전에 모르게 요소에 액세스 할 수 있습니다.

근무 데모 (link)