How can i use controller object values in angular directive?

Question

I have angular select on main page once user select value i want these object values in directive e.g $scope.selectedFileSize.value and $scope.selectedFileSize.size so i can further implement logic in directive. Any idea ?

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>

<progress-bar-custom message="event"></progress-bar-custom>

Controller.js

  $scope.onSizeChange = function(){
        $scope.maxMb = $scope.selectedFileSize.size;
        $scope.maxBytes = 3000;
        $scope.max = $scope.maxBytes;
        $scope.FileSizeString = $scope.selectedFileSize.value;
        console.log('FileSize',$scope.maxMb);
    }

directive.js

angular.module("App").directive('progressBarCustom', function() {
            return {
                restrict: 'E',
                scope: {
                    message: "="
                },
                templateUrl: '/view/partials/progressbar.html',
                controller: function($scope) {
                    var data = $scope.message;
                    var currentFileBytes = [];
                    var currentBytesSum;
                    $scope.maxBytes = 3000; // how to get these values from controller 
                    $scope.max = $scope.maxBytes;
                    $scope.FileSizeString = $scope.selectedFileSize.value; //How can i get these values from controller.

                    $scope.random = function(value) {
                        $scope.dynamic = value;
                        $scope.downloadPercentage = parseFloat((value / $scope.maxBytes) * 100).toFixed(0);
                        console.log('current value-dynamic', $scope.dynamic);
                    };

                }
            });

I need select ng-model value pass it to directive for that i still need an attribute on scope ? — hussain
– hussain, Commented Aug 25, 2016 at 15:03

Leo · Accepted Answer · 2016-08-26 04:01:25Z

2

You can define them as bindings in your directive scope:

scope: {
    message: "=",
    objToBind: "=" // add this one
},

And in HTML:

<progress-bar-custom message="event" obj-to-bind="selectedFileSize"></progress-bar-custom>

Then you could access it in your directive controller:

$scope.FileSizeString = $scope.objToBind.value

EDIT

I guess you want to dynamically change $scope.FileSizeString when your select is changed, right? Then I think you need to $watch in directive, otherwise it's always the initial value, and you won't aware of the changes in the future.

I don't know exactly how you implement your app, so I wrote a simple demo that demonstrate the key points:

I moved your default select option into ng-options array, and instead use ng-init to set default option.
I use $watch in directive to observe the binding's value change.

var app = angular.module('myApp', [])

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.fileSizes = [
    {size: -1, value: 'Select'},
    {size: 1, value: '1MB'},
    {size: 2, value: '2MB'},
    {size: 3, value: '3MB'}
  ]

  $scope.onSizeChange = function() {
    console.log($scope.selected.size)
  }
}])

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      selectedSize: '='
    },
    template: '<div style="font-family:monospace"><p><b>Your choice:</b> {{myChoice}}</p><p><b>Actual Choice:</b> {{selectedSize}}</p></div>',
    controller: function($scope) {
      $scope.myChoice = ''
      $scope.$watch('selectedSize', function (newVal, oldVal) {
        $scope.myChoice = (newVal && newVal.size !== -1) ? newVal.value : ''
      })
    }
  }
})

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <select ng-options="opt as opt.value for opt in fileSizes"
            ng-model="selected"
            ng-init="selected = fileSizes[0]"
            ng-change="onSizeChange()">
    </select>
    <my-directive selected-size="selected"></my-directive>
  </div>
</div>

edited Aug 26, 2016 at 4:01

answered Aug 25, 2016 at 15:57

Leo

13.9k5 gold badges47 silver badges64 bronze badges

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

3 Comments

hussain Over a year ago

Yes i added attribute as per your answer but $scope.objToBind.value is undefined because user did not select option from dropdown how can i solve this ?

Leo Over a year ago

@hussain I updated my answer, is that what you were looking for?

hussain Over a year ago

Thanks for detail answer it helped me to resolve the problem.

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-08-25 15:55:59Z

1

Pass your required object through the isolate scope

HTML

<progress-bar-custom message="event" file="selectedFileSize"></progress-bar-custom>

JS

        restrict: 'E',
        scope: {
            message: "=",
            file: "="
        },
        templateUrl: '/view/partials/progressbar.html',

answered Aug 25, 2016 at 15:55

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

Comments

Elaina · Accepted Answer · 2016-08-25 16:28:06Z

1

Since you have created an isolate scope in your directive, it is not normally recommended to use the $parent property, but rather to identify which variables you want to use from your parent scope. I would recommend that you pass in the variables you want to include in your directive in your html like so:

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

Then, in your directive in your scope attribute, you can add the variables.

scope: {
     message: "=",
     fileSize: "=",
     fileValue: "="
 },

answered Aug 25, 2016 at 16:28

Elaina

2143 silver badges9 bronze badges

Comments

Dheeraj vats · Accepted Answer · 2016-08-25 15:23:33Z

0

You can use :-

scope.$parent.propertyName

inside your controller to access $scope level variables

answered Aug 25, 2016 at 15:23

Dheeraj vats

3685 silver badges18 bronze badges

Collectives™ on Stack Overflow

How can i use controller object values in angular directive?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related