인쇄 할 때 각도 값이 구문 분석되지만 지시문 특성이 아님

Question

주소 배열이 addressesForUser 인 배열이 있습니다. 나는 또한 고립 된 범위를 가진 "주소"지시어를 가지고있다.

나는이 작업을 수행 할 때 :

<div ng-repeat="add in addressesForUser" entryid="{{ add.id }}">{{ add.id }}</div>    

모두가 잘, 3 개 주소 나는 다음 생성 된 HTML 얻을 :

<div entryid="1">1</div> 
<div entryid="2">2</div> 
<div entryid="3">3</div> 

을하지만 난이 수행 할 때

<address ng-repeat="add in addressesForUser" entryid="{{ add.id }}"></address> 

을

그리고 지시문의 연결 함수 내에서 console.log(attrs.entryid)을 시도하면 출력에 "add.id"라는 문자열이 생깁니다. . 더 나쁜 것은 생성 된 html의 속성이 정의되지 않았기 때문입니다. 속성 이름 만 있습니다. 따라서 1에서 3까지의 숫자도 아니며 "add.id"라는 문자열도 아닙니다.

내가 뭘 잘못하고 있니? 최종 목표는 entryid 속성에서 각 주소 지시문을 읽는 것이므로 독립적으로 자동 채우기 및 주소 카드 생성이 가능하며 entryid가없는 경우 새 주소를 입력하는 양식이 표시됩니다. 후자 부분은 잘 작동하지만 entryid 값을 읽지 않는 이유를 이해할 수 없습니다.

편집 : 분리 된 범위를 사용하지 않으면 (즉, 지시어에서 "scope : {}"이 (가) 제거되면) 작동합니다. 하지만 범위를 분리해야하기 때문에 개별 지시문의 범위에 특성을 포함시킬 수있는 방법이 필요하다고 생각합니다. 다음은 약간 삭제 된 주소 지시문 코드입니다.

myapp.directive('address', ['GeoService', '$http', function (gs, http) { 
    return { 
     restrict: 'E', 
     templateUrl: 'address.html', 
     scope: { 
     }, 
     link: function (scope, element, attrs) { 

      scope.emptyForm = { 
       first_name: '', 
       last_name: '', 
       country: '', 
       city: '', 
       street: '', 
       phone: '', 
       is_def: '', 
       zip: '', 
       additional_info: '', 
       residence_type: '' 
      } 

      console.log(attrs.entryid); 

      scope.countries = gs.countries(); 
      scope.resetAddressForm = function(e) { 
       scope.newAddressForm = scope.emptyForm; 
      } 
      scope.saveAddress = function() { 
       http.post('/users/saveaddress', scope.newAddressForm).then(function (response) { 

        console.log(response.data); // Do something 
       }); 
      } 
      scope.$watch('newAddressForm.country', function(v) { 
       if (v != undefined) { 
        scope.cities = gs.cities(v); 
       } 
      }); 
     } 
    } 
}]); 

Answer 1

지시어가 add.id의 값을 수정하지 않으므로 (양방향 데이터 바인딩이 필요하지 않음) = 대신 @을 사용하는 것이 좋습니다., A [plunker 나는이 문제의 더 나은 이해를 위해 주소 지시문 코드를 게시 할 필요가 있다고 생각

scope: { 
    entryid: '@', 
}, 
link: function (scope, element, attrs) { 
    attrs.$observe('entryid', function(value) { 
     console.log('observed value=',value); 
    }); 
    scope.$watch('entryid', function(value) { 
     console.log('watched value=',value); 
    }); 
    ... 
} 

fiddle

Answer 2

좀 더 땜질 후에 나는 우연히 해결책을 얻었습니다. 문서는 실제로이 영역에서 좀 더 많은 작업을 사용할 수 있습니다.

scope: {entryid: "="} 

을 여기에 실제로 문제가되는 값은 다음

console.log(scope.entryid); 

Answer 3

같이하지 바인드합니다 통해 범위를 통해 액세스된다

본질적으로, 격리 영역은 정의 될 필요 지시문에서 은 link 함수가 실행될 때 속성이 준비되어 있다고 가정하면을 사용할 수 없다고 가정합니다. 값을 보간하면 사용할 수없는 경우가 있습니다. 속성에 액세스하는 표준 방법은 $observe 통해 :

link: function (scope, element, attrs) { 
    attrs.$observe('entryid', function (val) { 
    // do something with the val 
    }); 
} 

당신이 분리 범위를 사용하는 경우는 공통 속성에 대한 범위 속성을 추가하는 것은 좋은 생각이 아마도하지만 여전히 할 값을 지정하지 않아야합니다 link에서 사용할 수 있습니다. 값을 보간 할 필요가있는 경우 항상 $observe 메서드를 사용해야합니다.