如何将对象传递给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属性，在模态指令的链接功能之后将其称为，因此modal指令永远不会得到那些选项。

解决方案是将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