How to use controller method in custom directive?

Question

Once value is selected from Select using ng-options user will click on startRecording at that time i want to display progressbar that is working from controller but i want to use that logic in directive controller when user click on startRecording i want to pass value to directive or invoke method startRecording from directive so progressbar can show.

diective.js

angular.module("App").directive('progressBarCustom',function () {
    return {
        restrict: 'E',
        scope:{
            message: "=",
            fileSize: "=",
            fileValue: "="
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: function ($scope) {
            var data = $scope.message;
            $scope.progressBarFlag = false;
    }
});

ctrl.js

$scope.startRecording = function () {
        $scope.progressBarFlag = true;
    }

main.html

<div class="col-md-3">
    <select class="form-control" ng-model="selectedFileSize" ng-options="item as item.value for item in FileSizeOptions" ng-change="onSizeChange()"><option value="">Select</option></select>
</div>
<div class="col-md-2">
    <button type="button" class="btn btn-primary" ng-click="startRecording()">Start Recording</button>
</div>


<progress-bar-custom message="event" fileSize="selectedFileSize.size" fileValue="selectedFileSize.value"></progress-bar-custom>

progressbar.html

<uib-progressbar ng-show="progressBarFlag" type="success" class="progress-striped" max="max" animate="true" value="dynamic"><span>{{downloadPercentage}}%</span></uib-progressbar>

possible duplicate of [this](http://stackoverflow.com/questions/16839259/angular-calling-controller-function-inside-a-directive-link-function-using) — Ja9ad335h, Aug 25 '16 at 18:29
Possible duplicate of [How to invoke directive after file selection in controller?](http://stackoverflow.com/questions/39150855/how-to-invoke-directive-after-file-selection-in-controller) — tuckerjt07, Aug 26 '16 at 03:52

score 1 · Accepted Answer · answered Aug 25 '16 at 19:47

Add a link function to your directive and call scope.$parent() to access the controller that holds methods for the progress bar .

Example :

angular.module("App").directive('progressBarCustom',function () {
    return {
        restrict: 'E',
        scope:{
            message: "=",
            fileSize: "=",
            fileValue: "="
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: function ($scope) {
            var data = $scope.message;
            $scope.progressBarFlag = false;
    },

    link: function(scope, el, attrs) {

            el.bind('click', function(event) {
                scope.$parent.startRecording();


            });
        }
});

Hope this helps

So i want to set `$scope.progressBarFlag` to true how i will do that in directive once startRecording invoked — hussain, Aug 25 '16 at 20:09
scope.$parent().progressBarFlag = true; ...do this logic in link function . you can remove your controller function if you choose to do this — KpTheConstructor, Aug 25 '16 at 21:25

score 0 · Answer 2 · answered Aug 25 '16 at 18:28

0

What about just showing and hiding the progress-bar as necessary using an ng-if? Adding a pass-through function into the actual directive seems unnecessary if all you are doing is showing and hiding the element on demand.

answered Aug 25 '16 at 18:28

Sam Bartlett

78
1
9

score 0 · Answer 3 · answered Aug 26 '16 at 03:48

You just need to pass the reference of that function into the included scope.

angular.module("App").directive('progressBarCustom',function () {
return {
    restrict: 'E',
    scope:{
        message: "=",
        fileSize: "=",
        fileValue: "=", 
        startRecording: "@" //Added code
    },
    templateUrl: '/view/partials/progressbar.html',
    controller: function ($scope) {
        var data = $scope.message;
        $scope.progressBarFlag = false;
        //You can call it like so
        $scope.startRecording(); //Added code
    }
});

<div class="col-md-3">
    <select class="form-control"
          ng-model="selectedFileSize"
          ng-options="item as item.value for item in FileSizeOptions"
          ng-change="onSizeChange()">
          <option value="">Select</option>
      </select>
</div>
<div class="col-md-2">
        <button type="button"
               class="btn btn-primary"
               ng-click="startRecording()">
            Start Recording
        </button>
</div>
<!-- Pass in the function here -->
<progress-bar-custom
    message="event"
    fileSize="selectedFileSize.size"
    fileValue="selectedFileSize.value"
    start-recording="startRecording()"<!-- Added code --> >
</progress-bar-custom>

From a best practices standpoint I also suggest looking into and adopting the" controller as" syntax as this leads to better organized and more readable code.

How to use controller method in custom directive?

3 Answers3