How to pass the value from controller to directive in angular js

Question

Helllo,

i want to pass the one value from controller to directive in angularjs. how would i pass the value and display it in directive .

in Html Section

in controller section my controller name is docontroller.

$scope.name = "world";

angular.element(document.querySelector('#carControls')).append($compile( mydirectivename as tag )($rootScope));

i have to pass my variable as well as controller in which i can get direct access in my directives it is my directive used in controller and appended to html in my directive section

myApp.directive('Controls', function ($compile, $rootScope, $timeout, $window) {
    var linker = function (scope, element, attrs) {
alertr('name' + scope.name);      
  $timeout(function () {

            scope.controlClass = 'fa fa-pause';
            var ControlsTemplate =

                '<button class="btn btn-default btn-sm margin-r-10 text-center"><i class="fa fa-backward"></i></button>'+
                '<button ng-click="doPlayOrPause()" class="btn btn-default btn-sm margin-r-10 text-center"><i id="play-pause" ng-class="controlClass"></i></button>'+
                '<button class="btn btn-default btn-sm margin-r-10 text-center"><i class="fa fa-forward"></i></button>'+
                '<button ng-click="doStop()" class="btn btn-default btn-sm margin-r-10 text-center"><i class="fa fa-stop"></i></button>';

            element.html(ControlsTemplate);
            $compile(element.contents())(scope);



        });  
    };
    return {
        restrict: "E",
        replace: true,
        link: linker
    };
});

in return i passed controller :'docontroller bt i cant find my name in scope'

why are you doing it like this... getting an element and appending using $compile... you need to get over jquery ways of doing things... — harishr
– harishr, Commented Aug 12, 2016 at 5:10

Ebin Manuval · Accepted Answer · 2016-08-12 06:11:08Z

3

in you controller

$scope.yourValue="myValue";

in your directive

app.directive('myDirective',function(){
 return {
        restrict: 'E',
        scope: {
            yourValue: '='
        },
})

in your dom

<my-directive your-value="yourValue"></my-directive>

checkout this js fiddle

edited Aug 12, 2016 at 6:11

answered Aug 12, 2016 at 5:30

Ebin Manuval

1,25514 silver badges33 bronze badges

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

4 Comments

Bhumiraj Darbar Over a year ago

i want to display it it in directive

Dan M. CISSOKHO Over a year ago

this is the right way to do it, show us the non working code with this solution

Bhumiraj Darbar Over a year ago

angular.element(document.querySelector('#carControls')).append($compile('<controls your-value="yourValue"></controls>')($rootScope));

Bhumiraj Darbar Over a year ago

still it is not display in directive

Dinesh Shah · Accepted Answer · 2016-08-12 05:12:07Z

0

If you are not using isolated scope than you can access parent controller $scope.

you can also use $rootScope.

like

Controller :

app.controller("demoCtrl",function($scope,$rootScope){

   $rootScope.xyz = "test";
// call your directive , value will be accessible in directive
})

Directive :

app.directive(...,function($rootScope){
 return   {
 // extra code omitted.

  // get your value here like
  // var abc =  $rootScope.xyz;

}
)

answered Aug 12, 2016 at 5:12

Dinesh Shah

1,2331 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to pass the value from controller to directive in angular js

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related