Angularjs how to pass data from a controller to a directive

Question

I have a controller which gets activated by a route (see below) I would like to create a directive that uses this data (once loaded) but I have no idea how to pass this data/bind it.

This is my controller:

app.controller("CampaignData" , ['$scope', 'Restangular', 'CbgenRestangular', '$http', '$q',
    function($scope, Restangular, CbgenRestangular, $http, $q){

       var campaign_call = CbgenRestangular.one('api/v1/campaign', "testcamp").get();

       $q.when(campaign_call.then(
        function(campaign) {
            $scope.campaign = campaign;
            console.log(campaign);
            }
        ))
        .then(function(){

             var cars = $http({method: 'GET', url:$scope.campaign.carlot});
              cars.then(function(reward){
             // do success things here
             console.log(reward.data)
              },
             function(reward){
             //do error things here
             });

        })

         }]);

Then in my template I want to do something like this

{{ campaign.name }}  {{ car.name }}

or even this

<campaign="name"></campaign> 
<campaign="car.name"></campaign>

How can this be done?

Can you post the route? Or the template that the route is pointing to? Once you assign a template to the route and the controller to the route, you should be able to use any scoped property defined within the controller. — Davin Tryon
– Davin Tryon, Commented Nov 22, 2013 at 22:45
"I would not like to create a directive that uses this data" <-- typo? — Nathaniel Johnson
– Nathaniel Johnson, Commented Nov 22, 2013 at 22:49

Davin Tryon · Accepted Answer · 2013-11-23 13:54:54Z

4

I would not like to create a directive that uses this data

There is no need to create a directive. Once you declare a template and controller in the route config, all the scoped properties within the controller will become active for the template.

Interpolation like this should then work fine:

<div>{{ campaign.name }}</div>
<div>{{ car.name }}</div>

If you wanted to handle a click event on one of the divs, it would look like this:

<div ng-click="myFunctionInController(campaign.name)">{{ campaign.name }}</div>

This function would then be defined in the controller like this:

$scope.myFunctionInController = function(name) {

    console.log(name);
}

edited Nov 23, 2013 at 13:54

answered Nov 22, 2013 at 22:48

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

4 Comments

Nathaniel Johnson Over a year ago

Don't forget to add the ng-controller directive to the wrapping element.

Davin Tryon Over a year ago

@Emmentaler No, if you have the controller defined in the route config, you don't want to add ng-controller. You will end up with 2 instances of the controller if you do that.

Prometheus Over a year ago

@Davin Tryon that makes sense about the route and controller thanks. So technically thee is nothing wrong with what I have? But what if I wanted to make campaign.name a button which needs to be listen to 'click'. A directive is needed for this right? If so how would they (directive and the controller) know about each other or the data from my controller be available to the directive? Sorry for all the questions just trying to make sense of it. :)

Davin Tryon Over a year ago

@Spike You do need a directive, but you don't need to create a custom directive. If you want to handle a click, you can use the angular ng-click directive and provide a controller function to call.

Collectives™ on Stack Overflow

Angularjs how to pass data from a controller to a directive

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related