AngularJSは外部コントローラを渡して使用します

Question

要するに次の質問があります：

コントローラーを正しく渡して、transcludeブロックで使用します。

私が望むのは、指示者のユーザーに、transcludeブロック内の特定のコントローラを使用する機会を与えることです。異なるディレクティブの用途に共通ではない特定のアクションを実装する目的。

私はコントローラとして属性を送信し、何らかの形でそのフィールドをリンク関数のスコープに追加することはできますが、正しい方法はわかりません。

私の現在の試行は次です。 ベースHTML：

<mylist items="list" ctrl="internalCtrl1"> 
     <li> 
     {{element}} <a ng-click="showAbc()">ShowAbc</a> 
     </li> 
    </mylist> 
    <h3>List2</h3> 
    <mylist items="list" ctrl="internalCtrl2"> 
     <li> 
      {{element}} <a ng-click="showXyz()">ShowXyz</a> 
     </li> 
    </mylist> 

指令：

<div> 
    <p>Cool list</p> 
    <!--<ul ng-controller="ctrl">--> 
    <ul> 
    <ng-transclude></ng-transclude> 
    </ul> 
<div> 

ディレクティブスクリプト：

......... 
    scope: { 
     ctrl: "=", 
     items: '=' 
    }, 
    controller: function($scope){ 
     //some common stuff 
    }, 
    link: function($scope, $element, $attrs, controller, $transclude) { 
     $scope.$watch("items", function(items) { 

     var el = $element.find("ul"); 
     el.empty(); 

     if(items) 
      items.forEach(function(item) { 
      var childScope = $scope.$new(); 
      childScope.element = item; 

      $transclude(childScope, function(content) { 
       el.append(content); 
      }); 

      }); 

     }); 
    } 

全コード：https://plnkr.co/edit/kPSu9s9xpHJdACFzofdP

非常に感謝すべてのヘルプ。

Upd。私は今2つの問題を抱えて：私はディレクティブに渡されたコントローラを使用する場合

• を - 私は、エラーに「Ctrl」を得た私はディレクティブで固定コントローラを使用する場合 ない機能
• ある - コントロールに アクセス決してありませんtranscludeブロックからの機能

Answer 1

私は、これはあなたが欲しいものだと思う...

.directive('mylist', function($controller){ 
    return { 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    templateUrl: 'mylist.html', 
    scope: { 
     ctrl: "@", 
     items: '=' 
    }, 
    controller: function($scope){ 
     //some common stuff 
    }, 
    link: function($scope, $element, $attrs, controller, $transclude) { 
     $scope.$watch("items", function(items) { 

     var el = $element.find("ul"); 
     el.empty(); 
     if(items) 
      items.forEach(function(item) { 
      var childScope = $scope.$new(); 
      childScope.element = item; 
      var theCtrl = $controller($scope.ctrl, { 
       $scope: childScope 
      }); 

      $transclude(childScope, function(content) { 
       el.append(content); 
      }); 

      }); 

     }); 
    } 
    }; 
}) 

https://plnkr.co/edit/7CFcOAB8HjeGARtq3K1t?p=preview

通知は、私はあなたが本当にただのコントローラの名前をしたいので、「@」に結合し、あなたのCtrlキーを変更しました。あなたのリンクで$ controllerオブジェクトを使ってコントローラをインスタンス化し、新しく作成した子スコープを渡します。それはインスタンス化中にコントローラのメソッドをchildScopeに追加します。

編集：あなたの意図に基づいて

、あなたは異なっこれにアプローチすることができます。おそらく、あなたの "スマート"テーブルを複数のディレクティブに分割する必要があります。 1つはルートにすることができ、1つは行にすることができます。行は'&'などon-select="myCtrl.selectItem(item)"を機能バインディングを持つことができ、ユーザーがこのような何かを行うことができます。

<smart-table items="items" on-paginate="paginateHandler()"> 
    <smart-table-row on-select="selectHandler(item)" ng-repeat="item in items"></smart-table-row> 
</smart-table>