Question

当使用grunt serve命令运行站点/应用程序时，AngularStrap选项卡功能很有用，但是当使用grunt serve：dist命令时，选项卡禁用功能不起作用。

特别是，“禁用”＆＃39; flag与grunt服务一起使用，相关的标签被正确禁用，但是使用grunt serve：dist标签不会被禁用。

以下代码添加到标准angular-fullstack生成的项目中将重现此问题（同时向客户端依赖项添加＆＃39; mgcrea.ngStrap＆＃39;并通过bower安装它） - 最终选项卡未被禁用为它应该是通过grunt serve：dist：

运行的

main.controller.js：

'use strict';

angular.module('tabTestApp')
  .component('main', {
    templateUrl: 'app/main/main.html',
    controller: function($scope, $templateCache) {
                    $scope.tabs = [
                      {title:'Select Video', content: 'test 0'},
                      {title:'Edit Video', content: 'test 1'},
                      {title:'Edit Audio', content: 'test 2'},
                      {title:'Play back', content: 'test 3', disabled: 'true'},
                    ];

                    $scope.tabs[1].disabled = 'false';
                    $scope.tabs[2].disabled = "false";
                    $scope.tabs[3].disabled = true;
                    $scope.tabs.activeTab = 0;
                }

  });

main.html中：

<!-- Partial for view1
    This partial contains tabs using AngularStrap tab mechanism -->
<div class="bs-docs-section" >
    <!-- bsActivePane is optional - see angular-starp documentation -->
    <div bs-active-pane="tabs.activeTab" bs-tabs>
      <div ng-repeat="tab in tabs" title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
      </div>
    </div>
</div>

理解问题的最简单方法可能是结果的一些图像。

当命令“grunt”发布时，这就是网站的样子。使用：

这就是命令grunt serve：dist使用时的情况（参见下面的上一个选项卡，在上面的代码中设置为禁用，在这种情况下不会被禁用，尽管它在上面）：

这是一个棘手的问题，因为它可能是一个Angular-fullstack问题，或者它可能是一个AngularStrap问题 - 我的感觉是它更可能是前者。

如果有人看过这个问题，或者知道一个好的工具/方法来调试这种类型的grunt构建问题，那么感谢任何帮助！

Answer 1

好的，通过终止过程，我发现了导致问题的原因。

由于这非常棘手，我已经抓住了我采取的方法：

使用浏览器开发人员工具查看了浏览器中的最终HTML - 这表明正确的版本插入了'禁用'类，但这并没有真正帮助显示它是如何被插入的
查看了Angular-Fullstack项目目录中client / app / main / main.html中的模板
查看了dist / client / app / app.4d38fc87.js文件（文件名是自动生成的，但它应该是此文件夹中唯一的app *****。js文件）。使用webtools调试器，您可以“完全打印”js文件和seacrh，以获得与上述main.html文件相同（或至少类似）的模板。

main.html文件包含以下行：

<!-- Partial for view1
    This partial contains tabs using AngularStrap tab mechanism -->
<div class="bs-docs-section" >
    <!-- bsActivePane is optional - see angular-starp documentation -->
    <div bs-active-pane="tabs.activeTab" bs-tabs>
      <div ng-repeat="tab in tabs" title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
      </div>
    </div>
</div>

但是app.4d38fc87.js正在尝试一个略有不同的模板：

a.put("app/main/main.html", '<!-- Partial for view1\n   This partial contains tabs using AngularStrap tab mechanism --><div class=bs-docs-section><!-- bsActivePane is optional - see angular-starp documentation --><div bs-active-pane=tabs.activeTab bs-tabs><div ng-repeat="tab in tabs" title="{{ tab.title }}" name="{{ tab.title }}" disabled ng-bind=tab.content bs-pane></div></div></div>')

仔细观察，很明显'disabled =“{{tab.disabled}}”'部分正在被修改。
从这看起来似乎有些东西错误地更新了模板，所以gruntfile似乎是一个合乎逻辑的地方。

查看Angular-Fullstack项目中的Gruntfile.js，试图看看它是如何控制模板maniuplation的，它包含以下几行：

    // Package all the html partials into a single javascript payload
    ngtemplates: {
      options: {
        // This should be the name of your apps angular module
        module: 'tabTestApp',
        htmlmin: {
          collapseBooleanAttributes: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeEmptyAttributes: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true
        },
        usemin: 'app/app.js'
      },

通过将属性all更改为false，问题得以解决。
将它们更改为真实并逐一完成它们，第一行似乎导致了问题 - 只需将其更改为false并将其他所有内容都保存为真正解决问题。
似乎很明显，由于某种原因，这个布尔属性折叠功能必须跳过“禁用”这个词（我将拼写更改为'dizabled'并且它在模板中没有被更改，只是为了检查它真的是这个词本身导致了这个问题。）
深入挖掘，Gruntfile正在使用HTML minifier - 查看其gitHub主页，以下注释链接到collapseBooleanAttributes：

折叠布尔属性       HTML 4.01具有所谓的布尔属性 - “已选中”，“已禁用”，“已选中”等。这些属性可能以最小化（折叠）形式出现，其中属性值完全被忽略。例如，我们可以简单地写一下<input disabled="disabled">。
，而不是写<input disabled>
Minifier有一个执行此优化的选项，名为collapseBooleanAttributes：

布尔属性很奇怪，因为它们只能有一个值是自己的名字，这意味着它们是真的。您可以跳过值部分（因此，而不是禁用=“禁用”，您可以自己禁用）并且它具有相同的效果，因此这种缩小技术（请参阅：http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2）。

将HTML中的disabled属性设置为false的方法根本就不包括它（这是AngularStrap在浏览器的最终HTML中所做的，如上面第一步所述）。

因此，如上所述，可以通过更改Angular-fullstack中的gruntfile来解决原始问题，但是AngularStrap也可以使用不同的方法来解析该属性。我会用两个项目来解决它并让他们决定。

如果有人想要分享更好或更详细的解释，我现在也不会接受这个答案。

AngularStrap选项卡可以使用Angular-Fullstack grunt服务，但不能使用grunt serve：dist

1 个答案: