Question

目前，我正在努力将这个简单的指令加载到DOM中。我的结果有所不同，因为看不到插入到指令的自定义元素/属性中的任何内容，而是看到我的应用程序的shell index.html（它的标题是准确的）插入...

DOM representation(my index.html inserted instead)

我已经在这里讨论了很多关于这个主题的问题，但大多数人倾向于参考Angular的命名规范化或进入更高级的主题。

指令是：

blocJams.directive('bjSellingPoint', function() {
  return {
    restrict: 'AE',
    templateUrl: '/directives/selling-point.html'
  }
});

指令的模板

<div class="point column third">
  <span class="ion-music-note"></span>
  <h5 class="point-title"> Choose your music </h5>
  <p class="point-description"> The world is full of music; why should you have to listen to music someone else chose</p>
</div>

我在视图的模板中引用了这个指令，就像这个

...        
<section class="selling-points container clearfix">
  <bj-selling-point></bj-selling-point>
</section>
...

此外，这是它应该在

中的模块，路由和控制器

var blocJams = angular.module('blocJams', ['ui.router']);

blocJams.config(function($stateProvider, $locationProvider) {

   $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
   });

   $stateProvider
      .state('landing', {
      url: '/',
      controller: 'LandingCtrl',
      templateUrl:  '/templates/landing.html'
   })
});
...

...
blocJams.controller('LandingCtrl', ['$scope', function($scope) {
  $scope.tagline = 'Turn the music up!';
}]);

文件结构

app/
-pages/
--index.html
-scripts/
--app.js
-templates/
--landing.html
-directives
--selling-points.html

Answer 1

原来这是指令模板的路径名问题。然而，不是那种立即显而易见的方式。

由于我使用带有预先配置的gruntfile的初学者项目，因此尝试将我的应用程序的文件结构更改为Google的Angular Styleguide推荐的文件结构，结果意外离开了在我的新目录中输出我的模板。

如果设置你自己的咕噜声任务可能很明显，但对像我这样的新人来说却很棘手。谢谢你指出我正确的方向@TheLazyChap

AngularJS指令模板无法呈现或工作，没有错误

1 个答案: