angularjs - 如何将对象传递给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
    };
  }
}

})

和 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