Question

有点令人头疼：我已经定义了一个在标记中使用它时不会呈现的指令。浏览器控制台中未报告任何错误。

标记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Players Character Sheet</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="character.js"></script>
    <script src="directives/directives.js"></script>
    <script src="directives/character-generator.js"></script>
    <script src="directives/basic-stats.js"></script>
    <link rel="stylesheet" type="text/css" href="character.css">
</head>
<body ng-app="character">
    <h1>Players Character Sheet</h1>
    <character-generator></character-generator>
    <basic-statistics></basic-statistics>
</body>
</html>

指令：

angular.module('character.directives', [])
.directive('characterGenerator', [function() {
return {
  restrict: 'E',
  templateUrl: 'directives/character-generator.html',
  replace: true,
  scope: {},
  controller: function() {
      $scope.character = {}
      $scope.character.dirty = false
      $scope.character.uuid = null
      $scope.button = document.getElementById('saveButton')
      $scope.load = function() {}
      $scope.save = function() {}
      $scope.willLoad = function() {
        $scope.button.onclick = $scope.load
      }
      $scope.willSave = function() {
        $scope.button.innerText = 'save'
        $scope.button.onclick = $scope.save
      }
    } // controller
  } // return
}])

为了进行比较，第二个指令是呈现，正好在另一个下面。

有没有人看到任何明显错误的东西？

谢谢。

Answer 1

在你的jsfiddle中，你有<body ng-app="runequest-character">，但你没有定义模块runequest-character。您定义的唯一模块是runequest-character.directives。请改为<body ng-app="runequest-character.directives">。

你的小提琴至少还有一个问题。您的指令中定义的templateUrl directives/character-generator.html但该html文件未包含在小提琴中

Answer 2

想出来，因为我试图用一个更简洁的例子来复制这个问题，在这里分享。虽然从我原帖中的示例中看不出来，但看看你能否弄清楚这张图片的错误：）

<强>文件1 ：

angular.module('myApp.directives', [])

<强> file2的：

angular.module('myApp.directives', [])
.directive('directive1', [ function() {
return {
    restrict:'E',
    templateUrl:'directives/d1.html',
    replace:true,
    scope:{},
    controller:function() {
    } // controller
} // return
}])

<强> file3的：

angular.module('myApp.directives', [])
.directive('directive2', [ function() {
return {
    restrict:'E',
    templateUrl:'directives/d2.html',
    replace:true,
    scope:{},
    controller:function() {
    } // controller
} // return
}])

指令不呈现，控制台中没有错误

2 个答案: