2014-10-24 5 views
0

간단한 각도 문제가 있습니다 - 아마도 나무의 나무를 볼 수없는 경우 일 것입니다.지시어에 의해 입력 필드의 값이 제거되고 있습니다.

지시문이 첨부 된 입력 필드가 있습니다. 결국 새로운 것을 이전 데이터와 비교하고 팝업을 표시합니다. 그러나 최대한 빨리 입력 필드에 지시 속성을 추가 할 때, 값이 사라집니다 :

쿵하는 소리 여기 : http://plnkr.co/edit/BQvKGe6kjuD0ThPBYJ4d?p=preview

HTML :

First Name: 
<input type='text' ng-model='currentEditItem.strFirstName' name='strFirstName' id='strFirstName' 
cm-popover="currentEditItem.personOldData.strFirstName"/> 

<br><br> 
ngModel: {{currentEditItem.strFirstName}} <br> 
cmPopover: {{currentEditItem.personOldData.strFirstName}} 

JS

var app = angular.module('app', []); 

app.controller('Ctrl', function ($scope) { 

    $scope.currentEditItem = {}; 
    $scope.currentEditItem.strFirstName = "Bob"; 
    $scope.currentEditItem.personOldData = {}; 
    $scope.currentEditItem.personOldData.strFirstName = "Roger";  
}); 


app.directive("cmPopover", function() { 
    return { 
     scope: { 
      ngModel: "=", 
      cmPopover: "=" 
     }, 
     link: function (scope, elem, attrs) { 
      console.log("ngModel", scope.ngModel); 
      console.log("cmPopover", scope.cmPopover); 
     } 
    } 
}); 

당신이 만약 Plunk로 가서 cm-popover 속성을 제거하면 입력 필드가 모델의 값으로 채워집니다. 특성이 추가되면 모델이 올바른 값의 범위에 있어도 값이 사라집니다.

답변

0

ngModel에 존재하지 않는 currentEditItem 개체에 대한 찾고 있습니다. 그러나 그 자체에 대해 고립 된 스코프를 생성하는 동일한 DOM 노드에 다른 지시어를 추가합니다. 이 사실을 DOM 노드에서 단 하나의 고립 된 스코프 만 가질 수 있다는 사실과 기본적으로 ngModel은 동일한 스코프로 사용/작동하도록합니다. cmPopover.

따라서 ng-model="currentEditItem.strFirstName"을 쓸 때 cmPopover 지시문 내에서 $scope을 실제로 주소 지정하는 경우 (상위) 컨트롤러에 주소가 없습니다. ng-model="$parent.currentEditItem.strFirstName"을 사용하여이를 확인할 수 있으며 작동합니다.

많은 수의 가능한 회피 방법과 해결책이있는 here이라는 매우 오랜 대화가 있습니다. 실제로는 fix in release 1.2.0이됩니다.

너무 짧아서 : 적어도 AngularJS 1.2.0 이상으로 업데이트하면됩니다.

+0

아! 이제는 의미가 있습니다. 업그레이드는 많은 양의 코드를 테스트하는 것을 의미하므로 해결 방법이 될 것입니다. 감사! –

1

지시문에서 격리 범위를 선언하십시오. 이 입력의 범위는 지시어 요소이므로이 분리 범위입니다. 그것은 내부 코드의에서 $parent를 하드 코딩 할 필요없이 $watch 그것을 할 수 있도록 자체에 대한 새로운 고립 범위를 만들지 않습니다 분리 범위

관련 문제