创建自定义指令时未加载 templateUrl

Question

我正在学习如何创建指令，因为它们看起来非常有用，而且我认为这对顶部导航栏很有用。我不确定我是不是误解了它们的使用方式，错过了一些小东西，还是完全不同的东西。

templateUrl 未加载并查看 other posts and the docs，我看不出哪里出了问题。

这里是指令

.directive('stNavDir', function() {
  return {
      restrict: 'E',
      transclude: true,
      templateUrl: 'partials/TopNav.html',
      scope: {
          siteName: "=",
      },
      link: function(scope, element, attrbiutes) {
        element.addClass('topBar');  
      }
  }

在index.html

中使用

<body>
    <st-NavDir site-name={{siteName}}>{{title}}</st-NavDir>

TopNav.html

<div>
    <button>Menu</button>
    </br>
    <div > 
        This will hold the navigation with a menu button, title of current location in app, and maybe other things
     </div>
</div>

所以它只显示 {{title}} 的值，并且在控制台中查看，没有错误，它似乎甚至没有加载 TopNav.html。

如果我完全错误地使用它或者有更好的方法，我也会洗耳恭听。但这似乎是尝试使用指令的好地方。我可以使用 ng-include 很好地加载它，但我想尝试这种方式，看看它是否会更有效。

我在选择样式时也遇到了问题，但这可能是由这个初始问题引起的。

Answer 1

更改此行

<st-NavDir site-name={{siteName}}>{{title}}</st-NavDir>

至

<st-nav-dir site-name={{siteName}}>{{title}}</st-nav-dir>

Camel-case 应该转换为 snake-case。

Answer 2

st-nav-dir

在 html 中可能会有帮助。

stNavDir是对应的指令定义名

这是一篇有趣的文章：

Naming a directive

创建自定义指令时未加载 templateUrl

templateUrl not loading when creating custom directive

javascript

angularjs

angularjs-directive