2014-06-08 64 views
0

基本上我想要做的是構建一個指令,將數組作爲一個孤立的範圍對象。使用ng-repeat編譯通過數組遍歷數組,然後使用$ compile服務編譯指令的作用域,然後將其插入到popover的內容屬性中。當ng-repeat應用於引用的直接父節點時,它工作正常。沒有時失敗。有人可以啓發它爲什麼不起作用。在此先感謝

Plunkr網址:http://plnkr.co/edit/i5DlOWgHbyC8YovgKvt6?p=info

HTML 
<a working data-names="['cat','dog','mouse']">Click to get a basic popover - working</a> 
<br/> 
<a not-working data-names="['cat','dog','mouse']">Click and you will get nothing</a> 

JAVASCRIPT 
app.controller('MainCtrl', function($scope) { 
}).directive("working", function($log,$compile,$http){ 
    return { 
     restrict: "A", 
     scope:{ 
      names:'=' 
     }, 
     link: function(scope, elem, attrs){ 
      $log.log(scope.names);//Logs Names 
      var html = "<p><a ng-repeat='name in names'>This is a {{name}}</a></p>"; 
      var popOverContent = $compile(html)(scope); 
      $log.log(popOverContent);//Logs p.ngscope properly 
      var options = { 
       content: popOverContent, 
       placement: "top", 
       html: true 
      }; 
      $(elem).popover(options); 
     } 
    }; 
}).directive("notWorking", function($log,$compile,$http){ 
    return { 
     restrict: "A", 
     scope:{ 
      names:'=' 
     }, 
     link: function(scope, elem, attrs){ 
      $log.log(scope.names);//Logs Names 
      var html = "<p ng-repeat='name in names'><a>This is a {{name}}</a></p>"; 
      var popOverContent = $compile(html)(scope);//Logs only a comment 
      var options = { 
       content: popOverContent, 
       placement: "top", 
       html: true 
      }; 
      $(elem).popover(options); 
     } 
    }; 
}); 

回答

1

apprently已與酥料餅的結構,不把範圍,因爲這兩個指令保持其ngrepeat在同一範圍內的水平,看來該酥料餅只需要有在其在第二示例模板一個根元素要構建幾個根元素 唯一更新是THA代替

var html = "<p ng-repeat='name in names'><a>This is a {{name}}</a></p>"; 

我用

var html = "<div><p ng-repeat='name in names'><a>This is a {{name}}</a></p></div>"; 

http://plnkr.co/edit/eMGQFykGjEImzXFA0ffh?p=preview

+0

涼..由於它的工作..但它的任何地方記載,酥料餅WUD需要一個根元素? – WiseWins

+0

不是我讀過它,但我已經發現這個問題已經設置替換標誌爲真的指令。 –

+0

ok gotcha。謝謝達揚 – WiseWins