angularjs의 지시어 템플릿에 객체를 전달하는 방법은 무엇입니까?

Question

ui-bootstrap 모달로 재사용 지시문을 만들려고합니다.

directive('update', function() { 
return { 
    restrict: "E", 
    templateUrl: "tplModal.html", 
    scope: { 
    selected:"=" 
    }, 
    link: function(scope, elm, attr){ 
    scope.open = function (obj) { 
     scope.shouldBeOpen = true; 
    }; 

    scope.close = function() { 
     scope.shouldBeOpen = false; 
    }; 

    scope.opts = { 
     backdropFade: true, 
     dialogFade:true 
    }; 
    } 
} 

})

과 scope.opts에도 불구하고 tplModal.html이

<button class='btn' ng-click='open(selected)'>Update</button> 
    <div modal="shouldBeOpen" close="close()" options="opts"> 
     <div class="modal-header"> 
      <h3><i class="lead" icon="{{selected.type}}"></i> {{selected.name}}</h3> 
     </div> 
     <div class="modal-body"> 
      <!-- stuffs here --> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-warning cancel" ng-click="close()">Cancel</button> 
     </div> 
    </div> 

, 아니이 :

그것은 거의 옵션 여기

제외하고 일하고는 지침입니다 페이드 효과. 내가 잘못하고있는 무슨 http://plnkr.co/edit/Ab4BOH?p=preview

: 여기

전체 코드?

Answer 1

문제는 당신이 범위에 opts 속성을 추가하는 것이입니다 후 연결 모달 지침의 연결 기능 후에 을 호출되는 기능를, 그래서 모달 지시어는 이러한 옵션을 얻을하지 않습니다.

솔루션은 이동하는 것입니다 scope.opts = ...에 사전 연결 기능 :

directive('update', function() { 
    return { 
     ... 
     compile: function() { 
      return { 
       pre: function(scope, elm, attr){ 
        ... 
        scope.opts = { 
         backdropFade: true, 
         dialogFade: true 
        }; 
       } 
      }; 
     } 
    } 
} 

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