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

Question

Я пытаюсь создать директиву многократного использования с помощью 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 свойство to scope в функции post-linking, которая будет вызываться после функции связывания модальной директивы, поэтому модальная директива никогда не получит эти опции.

Решение состоит в том, чтобы двигаться 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