Angularjs + Unable to call the directive code

Question

Am new to angularJS, and am not able to make out why the directive is not getting called I have separate js file controller for app, separate js file directive for app; Trying to create separate files for each;

Plunker Link of the code

HTML Code

<vertical-table data='fieldsList'></vertical-table>

Controller Code

app.controller('MainCtrl', function($scope) { $scope.fieldsList =[{},{},{}]; });

Directive Code

angular.module('plunker').directive('verticaltable', function () {
  console.log("field list initialzed");
    return{
        restrict: 'AE',
        template: 'table.html',
        replace: true,
        transclude: true,
        scope : {
            data: "="
        },
        controller: function($scope, $elem){
          console.log("controller");

        },
        link:function($scope, elem){
          console.log("link");
        }
    };
});

try .directive('verticalTable' instead of .directive('verticaltable', (notice the capital T in Table) — Khanh TO
– Khanh TO, Commented Jan 26, 2014 at 8:29
Facing new issues :-) Error: Template must have exactly one root element. was: table.html — John Smith
– John Smith, Commented Jan 26, 2014 at 8:31

Khanh TO · Accepted Answer · 2014-01-26 08:42:41Z

1

There are some mistakes to fix:

angular.module('plunker').directive('verticalTable', function () {
      console.log("field list initialzed");
        return{
            restrict: 'AE',
            templateUrl: 'table.html',
            replace: true,
            transclude: true,
            scope : {
                data: "="
            },
            controller: function($scope){
              console.log("controller");

            },
            link:function(scope, elem){
              console.log("link");
            }
        };
    });

Use templateUrl instead of template
Replace .directive('verticaltable' with .directive('verticalTable', (notice the capital T in Table)
Remove the $elem parameter in your directive's controller because you don't have a service named $elem.

DEMO

answered Jan 26, 2014 at 8:42

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

Collectives™ on Stack Overflow

Angularjs + Unable to call the directive code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related