評估自定義指令的jQuery replaceWith

Question

我有以下代碼之後：

<div ng-app="myApp" ng-controller="AngularCtrl"> 
    <a href="#" id="click_btn">Click here</a> 
</div> 
<script> 
jQuery("#click_btn").click(function(){ 
    jQuery(this).replaceWith('<p>Hello {{student.name}}</p><div my-repeater></div>'); 
}); 
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

這裏是我的角碼：

var myApp = angular.module('myApp',[]); 

myApp.directive('myRepeater', function() { 
return { 
    restrict: 'A',   
    link: function(scope, element, attrs) { 
     var myTemplate = "<div>{{rating}}</div>"; 
     for(var i=0;i<scope.items.length;i++) 
     { 
      var myItem = scope.items[i];      
      var text = myTemplate.replace("{{rating}}",myItem.rating); 
      element.append(text); 
     } 
    } 
}; 
}); 

function AngularCtrl($scope) { 
    $scope.student = {id: 1, name: 'John'}; 
    $scope.items = [{id: 1, ratings: 10}, {id: 2, ratings: 20}]; 
} 

在這裏，每當我點擊按鈕，該元素纔剛剛更換並沒有評估。我試着用「angular.bootstrap（document）;」文件準備好後。

但是，這只是評估角對象。但是仍然沒有評估自定義指令「my-repeater」。任何幫助，我怎麼能做到這一點？

Answer 1

首先，我想這是測試代碼，因爲角度有ng-repeat，這符合您的需求。

有幾個問題與您的代碼：

1）你不應該使用myTemplate.replace，但使用$compile服務。注入$編譯服務到您的指令（如添加功能PARAM），並使用它：

var text = $compile(myTemplate)(scope); 

2）控制器上的項目將不會在你的指令訪問。它添加爲一個值，你我的中繼器的屬性：

<div my-repeater='{{items}}'> 

在你的指令，你需要評估我的中繼器：

var items = scope.$eval(attrs.myRepeater); 

3）的jQuery（這）.replaceWith不會開球因爲它超出了它的範圍。您需要使用scope.$apply手動執行此操作。但最好是在向鏈路功能添加單擊事件：

link: function(scope, element, attrs) { 
     element.on('click', function() { 
      ... 
      scope.$apply(); 
     }); 

編輯：這是一個工作example。