각도 JS (내포 된 변수)에서 바인딩 문제

Question

당신이 괜찮 으면!

기본적으로 내 문제는 중첩 된 변수를 바인딩하는 것과 관련됩니다. 내 jsfiddle에서 볼 수 있듯이 테이블이 있으며 모든 열에 동적 링크가 있어야합니다. 그래서href 요소를 dinamically 만드는 지시문을 만듭니다.이 지시문은 테이블과 테이블 열의 정의를 채울 데이터에 따라 달라집니다.

이

는 HTML 코드입니다 :

<table ng-controller="MyCtrl" border=1 width="100%"> 
     <tr ng-repeat="item in dataGrid"> 
       <td ng-repeat="itemColumn in columnDefs" width="30%" style="text-align: center"> 
        <link-cell-template columnitem="itemColumn" parentitem="item" /> 
       </td> 
     </tr> 
    </table> 

그리고이 지시어 코드 :

myApp.directive('linkCellTemplate', function ($compile, $templateCache) { 
     return { 
      restrict: 'E', 
      require: '?ngModel', 
      replace: true, 
      transclude: false, 
      scope: { 
       columnitem: '=', 
       parentitem: '=' 
      }, 
      link: function (scope, element, attrs, ngModelCtrl) { 
       scope.hrefValue = angular.isDefined(scope.columnitem.linkUrl) ? scope.columnitem.linkUrl : ""; 
       scope.linkValue = angular.isDefined(scope.columnitem.linkDescription) ? scope.columnitem.linkDescription : scope.parentitem[scope.columnitem.field]; 
       // Append the HTML Layout in the Element 
       element.append($compile($templateCache.get('linkCellTemplate.html'))(scope)); 
      } 
     }; 
}).run(["$templateCache", function ($templateCache) { 
     $templateCache.put("linkCellTemplate.html", 
      "<a href=\"{{hrefValue}}\" role=\"button\" style=\"cursor: pointer;\">{{linkValue}}</a>"); 
}]); 

내 지시가 템플리트를 기반으로하고, 템플릿에 나는 두 개의 변수를 가지고있다 {{hrefValue}} 및 {{linkValue}} 지시어의 링크 함수 내에서 처리 할 값. 나를 괴롭히는 것은 {{linkValue}}이며, 열 정의에 따라 linkDescription 속성이 정의되지 않은 경우 열 필드 속성을 값으로 사용합니다. 그렇지 않으면 linkDescription이됩니다.

지시문은 거의 모든 데이터에서 올바르게 작동합니다. $scope.dataGrid 변수에서 볼 수 있듯이 연관 배열 배열이 있습니다. jsfiddle을 확인하면 두 번째 열과 같이 열 필드 내용 (linkDescription 대신)을 표시하도록 세 번째 열이 정의되어 있지만이 경우 링크를 실행하면 표시되지 않습니다. 코드를 확인한 후 문제가 필드 자체와 관련되어 있음을 알았습니다. 두 번째 열에서 필드는 Description이지만 세 번째 열은 Location.Name입니다 (dataGrid에 있음). "중첩 된 변수"(Location.Name)는 문제를 제공하는 변수입니다.

나는 내 지시어는 필드의 모든 유형 ( 간단한 Description로 또는 Location.Name 등 중첩)와 함께 작동 할 수있는 방법에 대한 방법을 찾기 위해 노력하고있다. 제가 누락 된 부분을 아십니까? 어떤 아이디어라도 도움이 될 것입니다.

감사합니다.

Answer 1

이 경우 (대괄호 안에 복잡한 표현이있는 경우) $parse을 사용해야합니다. 다행히 간단합니다.

myApp.directive('linkCellTemplate', function ($compile, $templateCache, $parse) { 
    ... 
    scope.linkValue = angular.isDefined(scope.columnitem.linkDescription) ? 
     scope.columnitem.linkDescription 
     // here is the change 
     : $parse(scope.columnitem.field)(scope.parentitem); 

Answer 2

자바 스크립트는 구성을 허용하지 않습니다 (이는 IMO 좋은) :

object['one'].two.three != object['one.two'].three 

때문에 'one' 및 'one.two' 해시 테이블에 저장된 다른 키입니다.

다행히도 angularjs는 이러한 조작을 위해 $parse을 제공합니다. http://jsfiddle.net/s7gn8/4/