Angularjs parsing function to templateUrl directive

Question

Is that possible to parsing function to angularjs directive that return a templateUrl? In my case, I have this directive

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

This is my 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>

And, I call that via class like this

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

Last, my controller have a function called fn

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

You can see that I parsing a forum variable to my templateUrl via directive. My problem is, Is that possible to parsing a function in that directive? So if I create

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

And if I click the button (In my templateUrl), It's call a function that I have written in controller. Is that possible?

Stanislav Kvitash · Accepted Answer · 2017-06-26 16:13:03Z

1

Yes, you can use & binding for this:

The & binding allows a directive to trigger evaluation of an expression in the context of the original scope, at a specific time. Any legal expression is allowed, including an expression which contains a function call. Because of this, & bindings are ideal for binding callback functions to directive behaviors.

Example:

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>

edited Jun 26, 2017 at 16:13

answered Jun 26, 2017 at 15:58

Stanislav Kvitash

4,63221 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adi Sparta Over a year ago

Hey, can you give me an example? I was new in angular btw

Stanislav Kvitash Over a year ago

@AdiSparta check out the example. Hope it helps.

Stanislav Kvitash Over a year ago

@AdiSparta accepting the answer would be much appreciated :)

Collectives™ on Stack Overflow

Angularjs parsing function to templateUrl directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related