Angularjs directive set scope var in directive and access in controller

Question

Hi I am working on angularjs. I am facing an issue in directive.
I have set the scope.user.name="amin shah" on link/click event and want to access this in controller how is this possible?

var dataSourceDirective = angular.module('mydirective', []);
dataSourceDirective.directive('dir', function () {
    return {
        restrict: 'C',
        scope: true,
        link: function ($scope, element, attrs) {
            element.bind('click', function () {
                    $scope.user.name ="amin shah";
                    $scope.$apply();
                    $('.sourceType_panel').hide();
                    $('#sourceType_1_panel').show();

            });
        }
    }
});

controller code

$scope.demo = function () {
      console.log($scope.user);`
},

RIYAJ KHAN · Accepted Answer · 2016-08-24 12:39:37Z

1

You need to create Isolated scope in your directive. The given controller should be parent of this directive.

var dataSourceDirective = angular.module('mydirective', []);
dataSourceDirective.directive('dir', function () {
    return {
        restrict: 'C',
        scope: {user:"=user"},
        link: function ($scope, element, attrs) {
            element.bind('click', function () {
                    $scope.user.name ="amin shah";

            });
        }
    }
});

In html :

<div ng-copntroller='yourCtrl'>
<dir user="user"></dir>
</div>

In Controller you should initialize the user.

OR

you use $broadcast & $emit if the parent is controller.

Withing link function of directive you can use $rootScope.$emit('user_name_update',user);

And in the controller you can listen this event

$scope.$on('user_name_update',function(data){

   console.log(user) // its should give your updated `user` object
})

edited Aug 24, 2016 at 12:39

answered Aug 24, 2016 at 12:33

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Comments

oguzhan00 · Accepted Answer · 2016-08-24 12:37:19Z

First of all you should correct your link method and I think you shouldn't need child sope at there. So you should delete your scope bind in directive too. You can reach parent scope with link method.

    app.directive('dir', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                    scope.user.name ="amin shah";
                    scope.$apply();

            });
        }
    }
});

and in your controller you can define scope variable like that:

    app.controller('MainCtrl', function($scope) {

      $scope.user = {
       name: ''
     }
  });

also you should add this directive to HTML :

<dir>Element</dir>
<p>{{user.name}}</p>

here is the working plunkr you should click Element than you can see your name from directive but in parent scope

https://plnkr.co/edit/umTdfukZ22hARoLjxdL3?p=preview

Collectives™ on Stack Overflow

Angularjs directive set scope var in directive and access in controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related