使用 ngdocs 时用于指令的 templateUrl答案

【问题标题】：templateUrl for directive when using ngdocs使用 ngdocs 时用于指令的 templateUrl
【发布时间】：2016-05-10 22:05:31
【问题描述】：

我正在尝试为我公司的项目设置ngdocs。作为初学者，我认为我应该为我们的一个指令设置一个示例。

我的 ngdocs 就是这样工作的，它会生成文档等等。我想知道的是，在使用 ngdocs 时应该如何为指令提供模板？我的搜索对此一无所知。这有点讽刺（文档工具缺少文档）。

所以，我生成文档的代码如下所示

(function (angular) {
   'use strict';

   /**
    * @ngdoc directive
    * @name EA.directive:ssn
    * @restrict E
    * @scope
    * @param {object} value The value to check for a valid ssn. This is double-binded. You will most likely want this like 'value="vm.ssn"'.
    *
    * @description
    * Textfield that gives only allows valid organisationnumbers and SSNs.
    * Checks everything except the last 4 chars.
    * The last four can be either all numbers, or 'TF##'.
    *
    * @example
    <example module="ea">
    <file name="index.html">
    <div ng-controller="SampleCtrl as vm">
      <ssn value="vm.ssn"></ssn>
    </div>
    </file>

    <file name="script.js">
    function SampleCtrl(){
      var vm = this;
      vm.ssn = "";
    }
    angular.module("ssnSample", ["ea"])
      .controller("SampleCtrl", SampleCtrl);
    </file>
    </example>
    */

   function ssn(){
      var ssnController = function(){
         var vm = this;
         init();

         function init() {
            if (vm.organisation !== undefined) {
               vm.uiMask = "?999999-9999";
               vm.pattern = /^(\d{10})$/;
               vm.errorText = "Ange ett giltigt organisationsnummer (XXXXXX-XXXX).";
            } else {
               vm.uiMask = "?99999999-**99";
               vm.pattern = /^[1-2][0,9]\d{2}([0][1-9]|[1][0-2])([0][1-9]|[1-2][0-9]|[3][0-1])(\d{4}|TF\d{2})$/;
               vm.errorText = "Ange ett giltigt personnummer (YYYYMMDD-XXXX).";
            }
         }

      };

      return {
         restrict: 'E',
         templateUrl: 'src/directives/ssn/ssn.html',
         uiMask: "",
         pattern: "",
         errorText: "",
         minLength: 0,
         scope: {
            eaClass: "@",
            value: '=',
            organisation: '@',
            blur: '&'
         },
         controller: ssnController,
         controllerAs: 'vm',
         bindToController: true
      };
   }
   angular.module('ea')
      .directive('ssn', ssn);
})(angular);

但结果似乎没有选择我的<ssn> 元素。

这里是一个plnkr，其中包含指令本身的示例。它不包括 ui-mask 部分，但您可以看到该指令有效。

当我生成 ng-docs 时，使用的路径是什么？我的文档结构是这样的：

src
|--directives
   |--ssn
      |--ssn.js
      |--ssn.html

那么在我的templateUrl: 中我应该放什么？根据 ngdocs，什么是有效的？

这是它当前显示的图片：

正如您所见，整个“演示”部分都是空白的，不应该如此。它应该包含我的 <ssn> 元素，它实际上只是一个带有花哨功能的包装 <input>。

建议？

编辑

自问以来已经一个多星期了，但没有答案。到目前为止，我已经尝试过ng-docs、ng-doc 和Dokular。没有工作。 AngularJS 的文档真的就这么死了吗？

【问题讨论】：

有趣的事实：它看起来甚至AngularJS team 是struggling with。你有没有找到让事情顺利进行的方法？我也试过grunt-angular-templates approach，但是没有什么显着的结果。
@Gargaroz 我从未找到解决方案。在尝试设置它大约两个半星期后，我们放弃了它。现在我们为我们创建的每个指令创建自己的超小型演示页面。我们没有任何花哨的文档页面，但我们至少可以互相展示我们的东西。

标签： javascript angularjs

【解决方案1】：

您在查看文档页面时是否检查过控制台？此外，您是否在构建模板文件时将它们部署到“docs”文件夹？我怀疑您的 ssn.html 没有在正确的位置找到[应该能够内联它以进行验证]。

【讨论】：