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

templateUrl not loading when creating custom directive

本文关键字：加载 templateUrl 自定义 指令 创建      更新时间：2024-06-06

我正在学习如何创建指令，因为它们看起来非常有用，我认为这将是顶部导航栏的一个很好的用途。我不确定我是否误解了它们应该如何使用，是否错过了一些小东西或完全不同的东西。

templateUrl没有加载并查看其他帖子和文档，我看不出哪里出了问题。

这是指令

.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很好地加载它，但我想尝试这种方式，看看它是否更有效。

我也很难接受这种风格，但这可能是由最初的问题引起的。

更改此行

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

至

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

骆驼箱应该改成蛇箱。

st-nav-dir

在html中可能会有所帮助。

stNavDir是相应的指令定义名称。

这里有一篇有趣的文章：

将指令命名为

相关文章：