How to pass data from a custom angular element to the controller?

Question

I have a controller and element directive:

        ngModule
            .controller('summaryCtrl', [ '$scope', '$http', function($scope, $http){
                $scope.loaded = false;
                $http
                    .get('some/item/'+itemId) //how do I get this itemId
                    .success(function(data){
                        $scope.data = data;
                        $scope.loaded = true;
                    })
                    .error(function(data){
                        //TODO
                    });
            }])
            .directive('cpSummary', function(){
                return {restrict: 'E', templateUrl: 'some/path.html'};
            });

and I want to use the directive something like this:

<cp-summary item-id="{id}" ng-controller="summaryCtrl"></cp-summary>

the item-id attribute get's set by the parent controller that is rendering the cp-summary elements in a ng-repeat. So I'd just like to know if it's possible to get the item-id attribute value inside the summaryCtrl.

If I understand you want just pass itemId to summaryController yes? This controller well be used only with this directive? — Alcadur
– Alcadur, Commented Aug 10, 2015 at 12:27

soroush gholamzadeh · Accepted Answer · 2015-08-10 12:56:27Z

1

You should use a controller for your directive. and then you can pass the item-id to the directive controller and do the stuff.

app.directive('cpSummary', function(){
            return {
                restrict: 'E',
                templateUrl: 'some/path.html',
                scope: {
                    item_id: '=itemId'
                },
                controller: ['$scope','$http',function($scope,$http) {
                    $http
                         .get('some/item/'+$scope.item_id)
                         .success(function(data){
                             $scope.data = data;
                             $scope.loaded = true;
                         })
                         .error(function(data){
                            //TODO
                         });
                }]
            };
        });

edited Aug 10, 2015 at 12:56

answered Aug 10, 2015 at 12:15

soroush gholamzadeh

2,7941 gold badge25 silver badges30 bronze badges

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

2 Comments

Pankaj Parkar Over a year ago

this solution will work if attribute is item-id="id"

Daniel Robinson Over a year ago

Is it possible to pass an array to the controller: property? like ['$scope', '$http', function($scope, $http){/*...*/}] otherwise when the code gets minified $scope and $http will become a, b.

Pankaj Parkar · Accepted Answer · 2015-08-10 12:21:15Z

1

As you wanted to pass id to you directive then you should include that variable inside directive isolated scope. It should be {{id}} instead of {id} & then use @ inside your directive. @ is for one way binding. Also assign the controller from directive.

Markup

<cp-summary item-id="{{id}}"></cp-summary>

Directive

.directive('cpSummary', function(){
    return {
       restrict: 'E', 
       templateUrl: 'some/path.html',
       scope: {
          item_id: '@itemId'
       },
       controller: 'summaryCtrl'
    };
});

answered Aug 10, 2015 at 12:21

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Deepak · Accepted Answer · 2015-08-10 12:27:51Z

0

var app = angular.module("App", []);

app.directive("myDirective", function() {
    var itemFunction = function(scope, element, attributes) {
        scope.item-id= attributes["myDirective"];
  };

  return {
    restrict: "A",
    template: "<p></p>",
    link: itemFunction
  };
});

answered Aug 10, 2015 at 12:27

Deepak

1611 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to pass data from a custom angular element to the controller?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related