如何将对象传递给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属性添加到范围后联功能，这将后模态指令的链接函数调用，所以模态指令将永远不会得到这些选项。

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