angularjs関数のtemplateUrlディレクティブへの構文解析

Question

function〜angularjsdirectiveの構文解析は可能ですか？templateUrlを返しますか？私の場合、私はこのdirective

.directive('forumForm', function(){ 
    return { 
     restrict : 'C', 
     scope : { 
      data : '=forum', 
     }, 
     templateUrl : '/templates/forum_form.tpl.html' 
    } 
}); 

を持っているこれは私のtempalteUrl

<input type="text" ng-model="data.Title" name="nameF" class="form-control" required="" ng-minlength="20" ng-maxlength="100"> 
<input type="" class="tagsinput" ng-model="data.tagIn" /> 
<button type="button" ng-click="fn(data)">Submit</button> 

あると、私はこの

<div class="forumForm" forum="forum"></div> 

最終同様classを経て、私のcontrollerと呼ばれる機能を持っていることを呼び出しますfn

$scope.fn = function((){ 
     alert('text') 
}) 

私は、変数を私のtemplateUrlに構文解析した結果、directiveを見ることができます。私の問題は、そののfunctionを解析することは可能ですか？だから私は

<div class="forumForm" forum="forum" fn="action(forum)"></div> 

を作成して、私は（私のtemplateUrlで）buttonをクリックした場合、それは私がcontrollerに書かれているfunctionを呼んだ。場合それは可能ですか？このため

Answer 1

はい、できuse & binding：

&が結合ディレクティブは、特定の時間に、オリジナルスコープのコンテキストで 式の評価をトリガすることができます。 に関数呼び出しが含まれている式を含め、任意の正規表現が許可されています。このため、&バインディングは、コールバック関数をディレクティブビヘイビアにバインドする場合に理想的です。

例：

angular.module('myApp', []) 
 
.controller('MyCtrl', ['$scope', function MyCtrl($scope) { 
 
    var ctrl = this; 
 
    
 
    ctrl.forum = {} 
 
    ctrl.log = log; 
 
    
 
    function log(data){ 
 
    console.log(data); 
 
    }; 
 
}]) 
 
.directive('forumForm', [function() { 
 
     var forumForm = { 
 
      restrict : 'EC', 
 
      scope : { 
 
       data : '=forum', 
 
       fn: '&' 
 
      }, 
 
      templateUrl : 'forum_form.tpl.html' 
 
     } 
 
     return forumForm; 
 
}]);

<script src="//code.angularjs.org/1.6.2/angular.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl as $ctrl"> 
 
    <forum-form forum="$ctrl.forum" fn="$ctrl.log(data)"></forum-form> 
 
    </div> 
 
    
 
    <script type="text/ng-template" id="forum_form.tpl.html"> 
 
    <input type="text" ng-model="data.title" /> 
 
    <input type="" class="tagsinput" ng-model="data.tagIn" /> 
 
    <button type="button" ng-click="fn({data: data})">Submit</button> 
 
    </script> 
 
    
 
</div>