Angular custom directive not working

Question

I have 2 things to do:

custom directive for dropdowns
custom directive for upload

var app=angular.module('app.directives', []);

app.directive('dropdowns', function() {alert("dropdown directive");
  return {
      restrict: 'AE',
      templateUrl: 'html/uploadFile.html'
  };
});

app.directive('uploadDir', function() {
  alert("upload directive");
  return {
      restrict : 'AE',
      templateUrl : 'html/dropdowns.html'
  };
});

The directive for dropdown is working But the directive for upload is not working(the alert message in uploadDir directive is not getting displayed)

Is the syntax correct?

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="ISO-8859-1">
    <title>upload using directive</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="lib/ui-bootstrap-tpls-0.13.0.js"></script>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers/controllers.js"></script>
    <script type="text/javascript" src="js/services/services.js"></script>
    <script type="text/javascript" src="js/directives/directives.js"></script>
</head>
<body>
<div>
<div dropdowns></div>
<div uploadDir></div>
</div>
</body>
</html>

user2943490 · Accepted Answer · 2015-06-01 05:39:24Z

5

Use <div upload-dir></div>. Directive names in camel case are normalised with dashes when matching against HTML elements.

answered Jun 1, 2015 at 5:39

user2943490

6,9402 gold badges24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Angular custom directive not working

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