범위 변수가 ng-grid로 변경되면 지시문을 업데이트합니까?

Question

ng-grid 내에서 태그처럼 보이도록 사용자 정의 된 객체 배열을 사용하기위한 요구 사항이 있습니다 (여기의 태그와 유사).

나는 cellTemplate을 사용하는 접근법을 취했고 이에 대한 사용자 지정 지시문을 만들었습니다.

정렬은 다른 열은 변경되지만 지시문이 업데이트되지 않는 것처럼 '태그'열은 그대로 유지됩니다. 이 모든 요구 사항을 충족하지만이에 태그 지시어를 변경할 수있는 경우

Answer 1

이 몰라 http://plnkr.co/edit/OxeUPaLLWtiCnvmgehnl

감사 : 여기

app.directive('tag', function($compile){ 
    return { 
    restrict: 'EA', 
    link: function(scope, element, attrs) { 
      attrs.$observe('tags', function(value) { 
       var array = JSON.parse(value); 
       var newHtml = '<ul>'; 

       for(var i=0;i<array.length;i++) 
       { 
        newHtml += '<li>' + array[i].text + '</li>'; 
       } 

       newHtml += '</ul>'; 

       var e = $compile(newHtml)(scope); 
       element.replaceWith(e); 

      }); 
     } 
     } 
}); 

가 plunker입니다 : 여기

내 지시어입니다 :

app.directive('tag', function($compile){ 
    var ddo = { 
    restrict: 'EA', 
    template: '<div><ul><li ng-repeat="tag in tags">{{tag}}</li></div>', 
    scope: { tags: "=tags" } 
    }; 
    return ddo; 
}); 

또는 코드를 유지하려면 jus t 먼저 DOM을 변경 한 후 컴파일 :

app.directive('tag', function($compile){ 
    var ddo = { 
    restrict: 'EA', 
    scope: { tags: "@tags" }, 
    link: function(scope, element, attrs) { 
     attrs.$observe('tags', function(value) { 
      var array = JSON.parse(value); 
      var newHtml = '<ul>'; 

      for(var i=0;i<array.length;i++) 
      { 
      newHtml += '<li>' + array[i].text + '</li>'; 
      } 

      newHtml += '</ul>'; 

      element.html(newHtml); 
      $compile(newHtml)(scope); 

     }); 
    } 
    }; 

    return ddo; 
}); 

편집 :

cellTemplate: '<ul><li ng-repeat="val in row.entity.arr">{{val}}</li></ul>'} 

: 당신이 원하는 모든 레이아웃을 변경하는 경우 또한, 아무것도 당신의 cellTemplate에 NG 반복 전화에서 당신을 중지하지