Angular Js how to access $scope in directive

Question

I created directive for form controls[input, select and radio], Each input have default value, if $scope.answers have this input value then this value should show in input box.

Below code is not working from link fucntion

if($scope.answers.PC && $scope.answers.PC != '')
                {
                    element.val = $scope.answers.PC;
                }

Directive function

function textControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            scope: {
                queObj: '=',
                },
            template: '<div class="form-group">\n\
<label for="{{queObj._attributeName}}" class="col-sm-5 control-label">{{queObj._text}}</label>\n\
<div class="col-sm-6"><input type="text" name="{{queObj._attributeName}}" class="form-control" id="{{queObj._attributeName}}" value="{{queObj._pageAttributes.defaultValue}}"></div>\n\
</div>'
            ,
            link: function ($scope,scope, element, attrs)
            {
                if($scope.answers.PC && $scope.answers.PC != '')
                {
                    element.val = $scope.answers.PC;
                }
                console.log($scope);
            }
        };
    }

HTML

<text-control-dir data-que-obj="que.QuestionData"></text-control-dir>

Remove `$scope` from link parameter list and use `scope` instead. See more [here](https://docs.angularjs.org/api/ng/service/$compile) — Hamlet Hakobyan, Jul 22 '16 at 11:16
you can't access $scope inside directive... that is why it has a `scope: {queObj: '='}` section... — kukkuz, Jul 22 '16 at 11:18
I want to access $scope.answers.PC in directive. I get undefined error if use scope. http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview — Praveen D, Jul 22 '16 at 11:22
queObj I am passing different object. which has list of question to show on UI. but form value I am maintaining in $scope.answers object. — Praveen D, Jul 22 '16 at 11:24
use scope instead $scope. Also read this http://stackoverflow.com/questions/17900201/how-to-access-parent-scope-from-within-a-custom-directive-with-own-scope-in-an — TheKingPinMirza, Jul 22 '16 at 11:24

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

You don't have access to the $scope in the directives directly but as you have a link function you can access the scope to the respective directive. Yet you can't set values like you are doing currently .val is a wrong way to set:

link: function(scope, element, attrs) {
    if (scope.answers && scope.answers !== undefined) {
      element.find('input').val(scope.answers.PC); // <---this is the way to set value
    }else{
      element.find('input').val('No vales found!!!');
    }
  }

Where element is the wrapper element div and you have to .find('input')¹ the text input placed inside it.

_{1. If jQuery library is not included before angular, angular will use jqLite and where .find() method is restricted to have a lookup of tagNames only.}

Plnkr

Just saw, your scope doesn't have answers property. So, that won't work.

Angular Js how to access $scope in directive

1 Answers1

Plnkr