pass data from controller to directive's link?

Question

In my controller :

myApp.controller('homeCtrl', function($scope, $rootScope, $state,  'red';
    $rootScope.$on('new_story', function(event, data) {
        $scope.cardObj = {key:'value'};
    });
});

In my HTML :

<div clickmeee ></div>
<div id="feedContainer" card='{{cardObj}}'> </div>

In my directive :

myApp.directive('clickmeee', function($compile, $rootScope) {

            return {
                restrict: 'A',
                scope: {
                    card: '@'
                },
                link: function(scope, element, attrs) {
                    element.bind('click', function() {   
                            scope.$watch('card', function(newVal, oldVal) {
                                alert(scope.card);
                            });         
                            });
                        }
                    };
                });

How do I pass data from controller to this directive. I compile some html and prepend it to the div. All of that is sorted out but I need some data from object I am trying to pass.

Any help??

Your scope attribute is named `card`. But you're watching and alerting `'cardObj'`. — JB Nizet, Dec 28 '15 at 07:43
You should not put watcher on click event..on click of element multiple watchers will get added.. — Pankaj Parkar, Dec 28 '15 at 07:43
@PierreDuc : I am not going to use broadcast , I am already using it to get the object. — HIRA THAKUR, Dec 28 '15 at 07:45
you can pass data using `attr` in your view like so : [here](http://stackoverflow.com/questions/16546771/how-do-i-pass-multiple-attributes-into-an-angular-js-attribute-directive) — Hasan Daghash, Dec 28 '15 at 07:50
@JBNizet : i am sorry. I did try it with card too. No luck. I will correct my my mistake in question — HIRA THAKUR, Dec 28 '15 at 07:53
No scope attribute is set while calling directive. May be this is the problem. — Sameer K, Dec 28 '15 at 07:57

score 2 · Answer 1 · answered Dec 28 '15 at 08:17

Bad news. You are doing it wrong all the ways.

Firstly

card='{{cardObj}}' >

this one should be put in the

<div clickmeee ></div>

So you can take it as binded scope variable in your directive registration

Secondly

If you managed to use '@' syntax

card: '@'

it will turn your input to string, not a binded scope. Use '=' instead.

In the end

You dont need to use watch here:

scope.$watch('card', function(newVal, oldVal) {
    alert(newVal);
});

since scope.card is binded via '=' connector. Just simple use alert(scope.card). (Need to warn you that alert an object is not a good idea)

I have tried your code here: plunker. Changed a litte bit by using cardObj as string for easier presentation. Does it match your work?

score 2 · Accepted Answer · answered Dec 28 '15 at 08:49

There are several problems in your code:

you define a scope attribute named 'card', but you use cardObj instead
you use a watch that is completely unnecessary. And worse: you create a new watch every time the element is clicked
you don't define any card attribute on your clickmeee element. Instead, you're placing it on another element, on which the directive is not applied
you're passing the attribute with '@'. That works, but the directive will receive a string, containing the JSONified object, rather than the object itself
you're not showming us where you emit an event that will initialize cardObj in the controller scope

Here is a plunkr showing a working version of your code.

Also, note that using bind('click') is a bad idea. You'd better have a template in your directive and use ng-click in the template, or simply not use a directive at all and just use ng-click directly on the div element.

Benedikt Köppel · Answer 3 · 2015-12-28T08:25:41.103

-1

You should watch the card object:

myApp.directive('clickmeee', function() {

    return {
        restrict: 'A',
        scope: {
            card: '@'
        },
        link: function(scope, element, attrs) {
            scope.$watch('card', function(value) {
                console.log(value);
            });         
        }
    };
});

And:

<div clickmeee id="feedContainer" card='{{cardObj}}'> </div>

Whenever the controller changes the cardObj, the directive's watch on card is triggered:

$scope.$apply(function() {
    $scope.cardObj = "test";
}

edited Dec 28 '15 at 08:25

answered Dec 28 '15 at 07:45

Benedikt Köppel

4,853
4
32
42

Ah sorry didn't notice you were binding the click event first. Updated my answer. – Benedikt Köppel Dec 28 '15 at 08:34

pass data from controller to directive's link?

3 Answers3