angular1 - angular.js：11655 RangeError：最大呼び出しスタックサイズを超えました

Question

私は、エンドポイントへの$ http呼び出しでコントローラを持つ指令を持っています。そのサーバーコールの結果を受け取り、それらをテンプレートに表示したいと思います。テンプレート内に単一の値があり、それを明示的に設定すると、すべて正常に動作します。テンプレートをサーバーコールにバインドしようとすると、上記のエラーが発生します。これを行うには$ compileサービスを使用する必要がありますか？事前に

おかげ

は、コンパイルここ

function mydirective(myservice,$compile) { 

    return { 
     restrict: 'ACE', 
     scope: { 
      url: '=', 
      title: '=', 
     }, 

     controllerAs: 'ctrl', 
     bindToController: true, 
     controller: ['$scope', function($scope) { 
      myservice.init('http://jsonplaceholder.typicode.com/posts') 
       .then(function(data) { 
        $scope.postRequest(data); 
       }); 
      $scope.postRequest = function(val) { 
       this.items = val; 
       this.title = val[0].title; 
      }; 
     }], 
     link: function ($scope, $el, $attr ) { 

      var template = '<div class=\"test\">{{this.title}}</div>' + 
       '<div class=\"tes\" ng-repeat=\"item in this.items\">'+ 
       '<div class=\"test1\">{{item.title}}</div>'+ 
       '</div>'; 

      var e = $compile(template)($scope); 
      $el.after(e); 
     } 
    }; 
} 

Answer 1

との最終的な結果は、あなたのディレクティブのリファクタリングバージョンです。 controllerAsを使用しているため、$scopeへの参照は完全に削除できます。また、変数ctrlは、コントローラのエイリアスとして作成され、内部コールバック関数からコントローラに一貫したアクセスを提供します。最後にlink関数が削除され、templateはthisの代わりにctrlという参照に調整されています。

エラー

RangeError: Maximum call stack size exceeded

は、本質的にそれ自体にDOMをコンパイル、$compileに関連して、コントローラではなく、DOMを参照しているテンプレートにthisを使用した結果です。

function mydirective(myservice, $compile) { 
 

 
    return { 
 
    restrict: 'ACE', 
 
    scope: { 
 
     url: '=', 
 
     title: '=', 
 
    }, 
 
    controllerAs: 'ctrl', 
 
    bindToController: true, 
 
    controller: function() { 
 
     var ctrl = this; //alias reference for use inside controller callbacks 
 
     myservice.init('http://jsonplaceholder.typicode.com/posts') 
 
     .then(function(data) { 
 
      ctrl.postRequest(data); 
 
     }); 
 
     ctrl.postRequest = function(val) { 
 
     ctrl.items = val; 
 
     ctrl.title = val[0].title; 
 
     }; 
 
    }, 
 
    template: '<div class=\"test\">{{ctrl.title}}</div>' + 
 
     '<div class=\"tes\" ng-repeat=\"item in ctrl.items\">' + 
 
     '<div class=\"test1\">{{item.title}}</div>' + 
 
     '</div>' 
 
    }; 
 
}

このコードはテストされていませんのでご注意ください。