Callback method inside angular directive with new scope

Question

I am building a shadow copy directive to allow me to easily discard changes made to an object, and only commit them when a button is pressed. This is working fine but I'm finding that there are certain instances where I want to call a function inside the controller when the data is committed. How do I access a function in the controller from the directive by passing the function as an attribute?

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div my-directive="name" commit-function="saveData()">
    <input type="text" ng-model="name" />
    <button ng-click="commit()">
      Save
    </button>
  </div>
  <span>{{name}}</span>
  <br />
  <span>{{copiedName}}</span>
</div>

Directive:

myApp.directive('myDirective', function() {
  return {
    scope: true,
    link: function(scope, el, att) {
      scope[att.myDirective] = angular.copy(scope.$parent[att.myDirective]);
      scope.commit = function() {
        scope.$parent[att.myDirective] = angular.copy(scope[att.myDirective]);
      }
    }
  }
});

Controller:

myApp.controller('myCtrl', function($scope) {
  $scope.name = 'Frank';
  $scope.copiedName = 'Freddie';

  $scope.saveData = function() {
    $scope.copiedName = $scope.name;
  }
});

I set the commit-function attribute to saveData() and now I want to get the function from that attribute.

I know I can use an isolated scope and set commitFunction: '&' but as I understand it, I then cannot access the commit function of the directive.

Here is a codepen showing what I'm after. I would expect when this is working that saveData has been fired and the display for name and copiedName would match.

what do you mean by then cannot access the commit function? — Pankaj Parkar
– Pankaj Parkar, Commented Dec 8, 2015 at 20:57
If I use an isolated scope, the commit function does not fire when the button is pressed. I assumed this is because the controller does not know anything about the directive scope therefore does not know about the commit function. — Lefka
– Lefka, Commented Dec 8, 2015 at 21:03
Only the requirement is to. don't update ng-model value till button is pressed?? — Pankaj Parkar
– Pankaj Parkar, Commented Dec 8, 2015 at 21:10
It's the main requirement. I want to use a directive so I can reuse the functions. The actual directive has four or five functions in it. — Lefka
– Lefka, Commented Dec 8, 2015 at 21:32

codeMagic · Accepted Answer · 2015-12-08 21:41:19Z

2

To be able to invoke a method specified in the attribute commit-function, you can use $apply, since the $rootScope is already in progress, you can add $timeout

myApp.directive('myDirective',['$timeout', function($timeout) {
  return {
    scope: true,
    link: function(scope, el, att) {
      scope[att.myDirective] = angular.copy(scope.$parent[att.myDirective]);
      scope.commit = function() {
        scope.$parent[att.myDirective] = angular.copy(scope[att.myDirective]);
        $timeout(function(){
           scope.$apply(att.commitFunction);
        },0);}
    }
  }
}]);

edited Dec 8, 2015 at 21:41

codeMagic

44.6k13 gold badges80 silver badges94 bronze badges

answered Dec 8, 2015 at 21:36

goeldeepika3

914 bronze badges

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

1 Comment

masa Over a year ago

This works with a couple of modifications: 1) commit-function="saveData", 2) scope.$apply(scope.$parent[att.commitFunction]);. Pen: codepen.io/anon/pen/zrxede

Collectives™ on Stack Overflow

Callback method inside angular directive with new scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related