Angularjs別のコントローラから来るデータでng-repeatを追加する方法

私は2つのコントローラ、リンクのリストとテーブルtheadと空のtbodyを含むpageController.jsと、データを追加する指令を持つarticleController.jsを持っていますTBODYへのリンクは、ここに Angularjs別のコントローラから来るデータでng-repeatを追加する方法

がHTMLファイルである、をPagesControllerのthead要素内

<div ng-controller='pageController as pg'> 
    <ul> 
     <li> 
      /* This table is dynamically appended */ 
      <a href="" sample-directive>Click Me</a> 
      <table> 
      <thead> 
       <tr> 
       <th>Field1</th> 
       <th>Field2</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
     </li> 
    </ul> 
</div>

articleController.js

をクリックしたときに

テーブルのtbodyを投入する必要があり、このコントローラ

myApp.directive("sampleDirective", function($compile, $parse, $rootScope) { 
     return { 

      scope: { 
       id: "=", 
       status: "@" 
      }, 

      link: function($scope, $element, $attrs) { 

       var clickingCallback = function() { 

        var $elem = $("#"+id); 
        $scope.articleData = [{"id":1076,"article_master_id":24,"article_name":"Testtest"},{"id":1077,"article_master_id":24,"article_name":"test2"},{"id":1078,"article_master_id":24,"article_name":"test3"}]; /* some data it has */ 


        var output = angular.element("<tr ng-repeat='fld in entryC.articleData' ng-show='entryC.articleData.length'>"+ 
         "<td>{{ fld.article_master_id }}</td>"+ 
         "<td>{{ fld.article_name }}</td>"+ 
         "<td>{{ fld.id }} {{ entryC.articleData }}</td></tr>"); 


       $elem.empty(); 
       $elem.append($compile(output)($scope)); 

       } 

      $element.bind('click', clickingCallback); 

      } 
}

<li><a sample-directive>タグがPageControllerでに属し、このディレクティブがクリックされたとき、それは、articleController.js下

をリンクコールバック関数を実行します私は私の指示のコールバック関数をトリガすることができた、問題基本的にはあなたのngのリピートは、テンプレート以来働いていなかった、それは文句を言わない実行を取得ng-repeatされず、エラー、

ワーキングサンプルが高く評価されるだろう、ありがとう、

出典

2017-11-20 apelidoko

ダイジェストサイクル完了前にコンパイルされました。手動で実行ブロックから要素をコンパイルおよびリンクすると

、あなたの要素の $ウォッチハンドラが設定されているが、$ ダイジェスト相はまだ起きていません。スコープがすべての$ watch式を調べ、対応する時計ハンドラを実行するのは、$ digestフェーズです。ここで

実施例である： -

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 

 
}) 
 
.directive("sampleDirective", function($compile, $parse, $rootScope,$timeout) { 
 
    return { 
 

 
    scope: { 
 
     id: "@appenddiv", 
 
     status: "@" 
 
    }, 
 

 
    link: function($scope, $element, $attrs) { 
 
     var clickingCallback = function() { 
 
     var $elem = angular.element(document.querySelector("#" + $scope.id)); 
 
     $scope.entryC = {}; 
 
     $scope.entryC.articleData = [{ 
 
      "id": 1076, 
 
      "article_master_id": 24, 
 
      "article_name": "Testtest" 
 
     }, { 
 
      "id": 1077, 
 
      "article_master_id": 24, 
 
      "article_name": "test2" 
 
     }, { 
 
      "id": 1078, 
 
      "article_master_id": 24, 
 
      "article_name": "test3" 
 
     }]; /* some data it has */ 
 

 

 
     var output = angular.element("<table class='table table-bordered table-striped'><tr ng-repeat='fld in entryC.articleData' ng-show='entryC.articleData.length'>" + "<td>{{ fld.article_master_id }}</td>" + "<td>{{ fld.article_name }}</td>" + "<td>{{ fld.id }} {{ entryC.articleData }}</td></tr></table>"); 
 

 
    
 
     $elem.empty(); 
 
     var content = $compile(output)($scope); 
 
     $timeout(function() { 
 
      $elem.replaceWith(content); 
 
     }); 
 
     
 

 
     }; 
 

 
     $element.bind('click', clickingCallback); 
 

 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <ul> 
 
     <li> 
 
     /* This table is dynamically appended */ 
 
     <div id="appenddiv">sdfsdfsfd</div> 
 
     <a href="" appenddiv="appenddiv" sample-directive>Click Me</a> 
 
     <table> 
 
      <thead> 
 
      <tr> 
 
       <th>Field1</th> 
 
       <th>Field2</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      </tbody> 
 
     </table> 
 
     </li> 
 
    </ul> 
 
    </div>

出典

2017-11-20 12:53:28

それは私が唯一それを動作させるために一緒に一度、すべてのそれをすべてをコンパイルする必要があることを意味するのでしょうか？ありがとうございました、！ – apelidoko

Angularjs別のコントローラから来るデータでng-repeatを追加する方法

答えて

関連する問題