Question

我正在学习如何创建指令，因为它们似乎非常有用，我认为这对顶部导航栏很有用。我不确定我是否误解了它们应该如何被使用，错过了一路上的小事或完全不同的事情。

templateUrl无法加载并查看other posts和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在创建自定义指令时未加载

2 个答案: