Angularjs passing variable to a directive's controller

Question

I am creating Angularjs Directive. However i need to pass a paramter to the directive and use it in its controller to populate its items using $http service.

i am passing a "listId" parameter to the directive, the controller inside the directive expects this parameter to retrieve items of that list from the server. The code in the controller embedded in the directive is commented.

  <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('metadataCtrl', function ($scope, $http) {

        });

        app.directive('mydirective', function ($http) {
            return {
                restrict: 'AE',
                template: '<div ng-repeat="model in items">{{ model.name}} </div>',
                replace: true,
                scope: {
                    listId: '='
                },
                controller: function ($scope) {

                    //console.log(scope.listId);
                    //  console.log(listId);
                    //$http({ method: 'GET', url: 'http://localhost:62624/home/listvalues?listid=' }).then(function (response) {
                   // $scope.items = response.data;

                    //}, function (result) { alert("Error: No data returned"); });

                },
                link: function (scope, element, attrs) {
                    console.log(scope.listId);
                }
            };
        });


    </script>

The HTML code

<body ng-app="app">


    <form name="myForm" ng-controller="metadataCtrl" class="my-form">

        <mydirective list-id="99"></mydirective>

    </form>
</body>

The listId can be accessed in the link() function in the directive (i am using console.log() to test that). However, this doesn't work in the controller function.

georgeawg · Accepted Answer · 2016-03-20 01:48:35Z

1

In the controller, use injected $scope.

        controller: function ($scope) {
            //USE $scope
            console.log($scope.listId);
            //
            //console.log(scope.listId);

answered Mar 20, 2016 at 1:48

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

2 Comments

Hussein Salman Over a year ago

inspite i have tried this and it didn't work. Its working right now. Thanks anyway.

kmhigashioka Over a year ago

@h.salman you should have post your own answer and accept it as answer

Collectives™ on Stack Overflow

Angularjs passing variable to a directive's controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related