как передать объект шаблону директивы в angularjs?

Question

Я пытаюсь сделать re-usable директиву с ui-bootstrap modal.

Это почти работает, за исключением вариантов

здесь директива:

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 
    }; 
    } 
} 

})

и 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> 

несмотря на scope.opts, нет эффект затухания.

здесь весь код: 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