ネストされたディレクティブの可変関数名

ネストされたディレクティブを実装しようとしています。 innerディレクティブは、ng-clickで関数を呼び出すボタンです。呼び出される関数の名前はモデルで定義されます。ネストされたディレクティブの可変関数名

ここから始めて、ここにはプランナーリンクがあります。 PLUNKER

問題は、ボタンが呼び出される関数を知らないということです。 ng-includeを使って外部ディレクティブ用のテンプレートを使用し、スコープ内に正しく名前が付けられた変数を使用すると、魅力的に機能します。

あなたのためにいくつかのコードスニペット：

のindex.html：

DIRECTIVES 
 
<outer-directive functions="functions" datas="datas"></outer-directive> 
 

 
<p>{{clicked}}</p> 
 

 
NG-Include : 
 
<div ng-include src="'outer-template.html'"></div>

外ディレクティブのテンプレート

<div ng-repeat="d in datas"> 
 
    Hi, {{d}} 
 
    <inner-directive 
 
    ng-repeat="funct in functions" 
 
    text="funct.text" 
 
    method="this[funct.method](d)"> 
 
    </inner-directive> 
 
</div>

コントローラ

app.controller('MainCtrl', function($scope) { 
 
    $scope.datas = [0, 1]; 
 
    $scope.functions = [{ 
 
    method: 'functOne', 
 
    text: 'Funct One' 
 
    }, { 
 
    method: 'functTwo', 
 
    text: 'Funct Two' 
 
    }]; 
 

 

 
    $scope.clicked = 'Nothing happend'; 
 

 
    $scope.functOne = function(data) { 
 
    $scope.clicked = data + ' pressed Funct 1'; 
 
    } 
 

 
    $scope.functTwo = function(data) { 
 
    $scope.clicked = data + ' pressed Funct 2'; 
 
    } 
 

 
});

外指令JS

app.directive('outerDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     functions: '=', 
 
     datas: '=' 
 
    }, 
 
    templateUrl: 'outer-template.html' 
 
    } 
 
});

インナー指令JS

パラメータはオブジェクトとして渡されるべきコントローラに指令からのコールバック関数で

app.directive('innerDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     method: '&', 
 
     text: '=', 
 
     datas: '=' 
 
    }, 
 
    template: '<button ng-click="method(datas)"> {{text}}</button>' 
 
    } 
 
});

出典

2017-07-07 old_account

ですが、私は$に放出すると$で行くことにしました（[この質問]（https://stackoverflow.com/questions/14502006/working-を参照してくださいwith-scope-emit-and-scope-on）） –

。ここで

はデモplunkerは

である、それはコールバック関数を介して制御するディレクティブからのparamを渡す方法を理解するのに役立ちます願っています。

ネストされたディレクティブに進む：パラメータをディレクティブに渡し、最後にコントローラに渡すには、同じプロセスに従う必要があります。

コントローラは

app.controller('MainCtrl', function($scope) { 
    $scope.datas = [0, 1]; 

    $scope.functions = [{ 
    "method": "functOne", 
    "text": "Funct One" 
    }, { 
    "method": "functTwo", 
    "text": "Funct Two" 
    }]; 

    $scope.clicked = 'Nothing happend'; 

    $scope.functOne = function(id){ 
    $scope.clicked = id + ' .....pressed Funct 1'; 
    } 

    $scope.functTwo = function(id){ 
    $scope.clicked = id + ' ....pressed Funct 2'; 
    } 

});

外diretive

app.directive('outerDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     outer: '&', 
     datas: '=' 
    }, 
    templateUrl: 'outer-template.html', 
    } 
});

インナーディレクティブ

app.directive('innerDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     inner: '&', 
     text: '=', 
     data: '=' 
    }, 
    template: '<button ng-click="clickMe()">click here</button>', 
    link: function (scope, element, attrs) { 
     scope.clickMe=function(){ 

      scope.inner({id:'hello... data is ' + scope.data }); 
     } 
    } 

    } 
});

HTML

<body ng-controller="MainCtrl"> 

    <div ng-repeat="func in functions"> 
     <outer-directive outer=$eval(func.method)(term) datas="datas"></outer- 
     directive> 
    </div> 

    <p>{{clicked}}</p> 

    </body>

としますここ

テンプレート

<div ng-repeat="d in datas"> 
<inner-directive inner="outer({term: id})" data="d"></inner-directive> 
</div>

だからworking plunker

出典

2017-07-12 15:24:14 himanshu

詳細な回答ありがとうございます。私の場合は、外部ディレクティブ内で繰り返す機能が必要であり、外部ディレクティブを各機能ごとに繰り返さないようにする必要があります。だから私は外部の指令でそれぞれの関数を '＆'で束縛することはできません。 –

ネストされたディレクティブの可変関数名

答えて

関連する問題