如何在angularjs中将对象传递给指令模板？

我试图用ui引导模式生成一个可重用的指令

除了选项外，它几乎可以正常工作

以下是指令：

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>

更新
{{selected.name}
取消

尽管有

scope.opts

，但没有褪色效果

以下是全部代码：

---

我做错了什么

问题在于，您将

opts

属性添加到后期链接函数的作用域中，该函数将在模态指令的链接函数之后调用，因此模态指令永远不会获得这些选项

解决方案是将

scope.opts=…

移动到预链接功能：

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

---

在此处发布代码，告诉您如何使用该指令，告诉您希望该代码做什么，以及它会做什么。我更新了问题您的plunk不工作，我收到了“plunk not found”错误。发布tplModal.htmlsorry的代码。我更新了问题，链接到plnkr的链接非常有效！在过去的几个小时里，我一直在颠倒这个问题，但我仍然远远没有找到答案。现在，如果我在模式中使用另一个组件（例如ui引导datepicker或ngUpload），我是否应该将相关函数放在这个预链接函数中？@desgnl您可以，但您不必将函数放在预链接函数中，这实际上取决于调用函数的时间。如果稍后将调用该函数，例如事件处理程序，则可以在post链接函数中安全地定义它们。