Question

我正在建立一个使用角度的网站作为标签链接表，我无法让模板化的部分显示出来。不确定问题出在哪里，但我相信一切都设置正确，文件都在托管驱动器上，我已经习惯了很多次正确测试javascript。角度或HTML有什么问题吗？我刚才包括了相关的部分。

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"
  });
})();

模板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>

Answer 1

除非你做的事情非常聪明我以前没见过，否则我认为你的问题就在于这一行：

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

你似乎在控制器上调用.directive，这很奇怪。您还缺少指令定义对象上的结束}。你在看javascript控制台吗？这样的错误应该出现。

.directive()是角度模块的方法，因此您应该使用：

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

P.S。如果您将所有内容从最初的.module()链接起来，您可以使所有内容更加整洁。这就是你的代码的样子：

angular.module('operations', [])

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

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

使用Angular JS的模板和JS

1 个答案: