Angular directive does not call parent scope function

Question

I am trying to call a parent function from a directive. But my functions are not being called.

Here is the code for your reference.

Controller

'use strict';

angular.module('myApp')
  .controller('MyCtrl', function($scope) {
    $scope.iconSelected = function() {
      console.log('iconSelected');

      var icon = angular.element('#icon').prop('files');

      if (!icon) {
        return;
      }

      icon = icon[0];

      var _URL = window.URL || window.webkitURL;
      $scope.utility.icon = _URL.createObjectURL(icon);
    }

    $scope.sourceSelected = function() {
      console.log('sourceSelected');

      var source = angular.element('#source');
      console.log(source.prop('files'));
    };
  });

Directive

'use strict';

angular.module('myApp')
  .directive('uploadButton', function() {
    return {
      templateUrl: 'app/directives/upload-button/upload-button.html',
      restrict: 'E',
      transclude: true,
      scope: {
        onSelect: '&'
      },
      link: function(scope, element, attrs) {
        scope.name = attrs.name;
        scope.id = attrs.id || attrs.name;
        scope.label = attrs.label || attrs.name;
        scope.accept = attrs.accept;

        scope.showDialog = function() {
          element.find('#' + scope.id).trigger('click');
        };

        element.find('input').change(function() {
          scope.$apply(attrs.onSelect);
        });
      }
    };
  });

Directive Template

<md-input-container class="upload-button">
  <md-button class="md-raised" ng-click="showDialog()">
    <span ng-transclude></span>
  </md-button>
  <input type="file" name="{{name}}" id="{{id}}" aria-label="{{label}}" accept="{{accept}}">
</md-input-container>

Directive Usage

<upload-button name="icon" on-select="iconSelected()" accept=".svg">Choose an icon</upload-button>
<upload-button class="source-btn" name="source" on-select="sourceSelected()" accept=".zip">Select source code</upload-button>

also use scope.$eval rather thatn scope.$apply

harishr
– harishr

2015-06-08 14:53:17 +00:00
Commented Jun 8, 2015 at 14:53 — harishr
– harishr, Commented Jun 8, 2015 at 14:53

ShankarSangoli · Accepted Answer · 2015-06-08 14:22:48Z

1

Inside your directive code you are calling onSelect using attrs.onSelect change it to scope.onSelect. attrs.onSelect will just give you the string value iconSelected(). You need the function reference which will be available in the isolated scope which is created by the directive.

element.find('input').change(function() {
  scope.$apply(scope.onSelect);
});

answered Jun 8, 2015 at 14:22

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

Collectives™ on Stack Overflow

Angular directive does not call parent scope function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related