0

次のコードがあります。

<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」はまだ評価されていません。どうすればこれを成し遂げることができますか？

4

1 に答える 1

2

まず、angularにはニーズに合ったng-repeatがあるため、これはテストコードだと思います。

コードにはいくつかの問題があります。

1）myTemplate.replaceを使用するのではなく、$compileサービスを使用する必要があります。$ compileサービスをディレクティブに挿入し（関数paramとして追加）、それを使用します。

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

2）コントローラー上のアイテムは、ディレクティブでアクセスできません。my-repeater属性に値として追加します。

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

ディレクティブでは、my-repeaterを評価する必要があります。

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

3）jQuery（this）.replaceWithはスコープ外であるため、Angularをキックオフしません。scope。$applyを使用して手動で行う必要があります。ただし、ディレクティブリンク関数にクリックイベントを追加することをお勧めします。

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

編集：これが実際の例です。

于 2012-12-28T13:22:01.247 に答える