如何將對象傳遞給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