분리 된 범위를 정의 할 때 지시어 동작이 변경됨

Question

javascript 격자 라이브러리 slickgrid에 대한 지시문이 있습니다.

http://plnkr.co/edit/KWZ9i767ycz49hZZGswB?p=preview

는 내가 뭘 원하는 다시 컨트롤러까지 선택한 행을 통과합니다. 그래서 격리 된 범위 ('='사용)를 사용하여 컨트롤러와 지시문 사이에서 양방향 바인딩을 작동 시키려고합니다. 내가 범위 선언의 어떤 종류없이 지시어를 정의하면

모든 작동합니다.

<slickgrid id="myGrid" data="names" selected-item="selectedItem"></slickgrid> 

app.directive('slickgrid', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    //scope: { 
    // selectedItem: '=' 
    //}, 
    template: '<div></div>', 
    link: function($scope, element, attrs) { 
    ... 
    var redraw = function(newScopeData) { 
    grid.setData(newScopeData); 
    grid.render(); 
}; 
$scope.$watch(attrs.data, redraw, true); 

내가 (선 app.js에서 19 ~ 21) 위의 라인의 주석을 해제한다면 그것은 $ 범위처럼 보이는 $를 attrs.data 객체를보고있는 watch는 redraw를 호출하지만 attrs.data는 undefined로 전달됩니다.

내 분석이 잘못 될 수는 있지만 왜 범위를 정의하면이 문제가 발생하는지 잘 모르겠습니다. 누군가가 그 이유를 설명 할 수 있습니까?

.nathan.

Answer 1

격리 범위를 정의하면 지시문의 $ watch는 분리 범위에서 attrs.data이 무엇인지 찾아냅니다. attrs.data은 문자열 names으로 평가되므로 $ watch는 격리 범위에서 $scope.names을 찾고 있습니다 (존재하지 않음). (독립적 표시 범위없이, 지시어는 MainCtrl와 같은 범위를 사용하며, $scope.names이 존재한다.), 다른이 names에 전달하는 범위 속성을 분리 정의해야합니다

는 분리 범위를 사용하려면 :

scope: { 
    selectedItem: '=', 
    data: '=' 
}, 
... 
$scope.$watch('data', redraw, true); 

HTML은 동일하게 유지 될 수 있습니다.