Templates and JS using Angular JS

Question

I'm building a website using angular for a tabbed table of links and I can't get the templated section to show up at all. Not sure where the issue lies, but I believe everything is set up correctly and the files are all on a hosted drive that I've used to properly test javascript plenty of times. Is there anything wrong with the angular or HTML? I've just included the pertinent bits.

HTML:

<html lang="en" ng-app="operations">
  <head>
  ...
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="base_styles.css" type="text/css">
  <script type="text/javascript" language="javascript" src="Operations.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

  </head>

  <body ng-controller="OperationsController as ops">
    <div id="header">
    <h1>Operations</h1>
    <category-tabs></category-tabs>
  </body>
</html>

Angular JS:

(function() {
  var operationsApp = angular.module('operations', []);

  operationsApp.controller('OperationsController', function() {
    var operations = this;
    operations.categories = [];
  });

  OperationsController.directive("categoryTabs", function() {
      return {
          restrict: "E",
          templateUrl: "category-tabs.html"
  });
})();

Template HTML:

 <section>
   <ul class = "nav nav-pills">
    <li ng-class = "{ active : tab.isSet(1) }">
        <a href ng-click="tab.setTab(1)">Popular Tools</a>
     </li>
      ...
   </ul>
 </section>

did you check the path of template file, and if it's fetched by browser (see network tab)? — Ryo
– Ryo, Commented Nov 18, 2014 at 21:05
I fixed the path to map to the network location I have these files mapped and the middle-man Operations.js is showing up in the network tab, but the template is not, even though I'm using the same explicit address for the html file I did for the js. — ianodork
– ianodork, Commented Nov 18, 2014 at 21:47

Ed_ · Accepted Answer · 2014-11-19 00:23:57Z

Unless you're doing something really clever that I haven't seen before, I think your problem lies in this line:

OperationsController.directive("categoryTabs", function() { });

You seem to be calling .directive on a Controller, which is odd. You are also missing a closing } on the directive definition object. Are you looking at the javascript console? Errors like this should show up.

.directive() is a method of an angular module, so you should use:

operationsApp.directive("categoryTabs", function() { });

P.S. you can make everything a bit neater an more readable if you chain everything off the initial .module(). This is how your code would look:

angular.module('operations', [])

.controller('OperationsController', function() {
  var operations = this;
  operations.categories = [];
})

.directive("categoryTabs", function() {
  return {
    restrict: "E",
    templateUrl: "category-tabs.html"
  }
});

Collectives™ on Stack Overflow

Templates and JS using Angular JS

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