AngularStrapタブはAngular-Fullstack grunt serveで動作しますが、grunt serveでは使用できません：dist

Question

AngularStrapのタブ機能は、サイト/アプリケーションがgrunt serveコマンドで実行されているときに機能しますが、grunt serve：distコマンドが使用されたとき、機能が動作しません。

特に 'disabled'フラグは、適切なタブが適切に無効になっているが、grunt serveでgrunt serveで動作します。distはタブを無効にしません。

次のコードは、この問題を再現します（ 'mgcrea.ngStrap'をクライアントの依存関係に追加し、bowerを使用してインストールします）。最後のタブは、うなり声を経由して実行するには、サーブ：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> 

問題を理解する最も簡単な方法は、結果の一部の画像にある場合があります。

これが使用されているコマンド「イサキが仕える」ときのサイトには、次のようになります。

そして、これは、コマンドイサキがサーブするとき、それは次のようになります。DISTが使用されている（下の最後のタブを参照してください上記のコードでは無効に設定されている、それは上記のですが）、この場合には無効になっていません。

これは、角度-fullstack問題になる可能性がありますか、それはAngularStrapかもしれないとトリッキーな問題です問題 - 私の気持ちは、前者の可能性が高いということです。

誰でもこの問題を見たことがある場合、またはこのタイプの不完全なビルドの問題をデバッグするための優れたツール/方法を知っている場合は、お手数ですがご支援いただければ幸いです。

Answer 1

私はこの問題を引き起こしていると思われるものを発見しました。

これは私が取ったアプローチcaptutedいるかなりトリッキーだったので：

• は、ブラウザの開発者ツールを使用したブラウザで、最終的なHTMLを見て - これは正しいバージョンが「無効」クラスが挿入されたことが示されたがこれは実際にどのようにinstertedされていることを示すのに役立ちません
• Angular-Fullstackプロジェクトディレクトリのクライアント/ app/main/main.htmlのテンプレートを見てください
• dist/client/app/app.4d38fc87.jsファイル（ファイル名は自動生成されますが、このフォルダ内の唯一のアプリケーション*****。jsファイルである必要があります）。 webtoolsデバッガを使用すると、上のmain.htmlファイルと同じ（または少なくとも類似している）と予想されるテンプレート用のjsファイルとseacrhを「きれいに印刷」できます。

  <!-- 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：

main.htmlをファイルには、これらの行が含まれていました。jsがわずかに異なるテンプレートをinsteringた：密接探し

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>') 

• は、無効になって= "{{tab.disabled}}" 'の部分が変更されていたことが明らかです。

• これは、誤ってテンプレートを更新していた可能性が高いため、gruntfileが見た目に論理的な場所に見えたようです。変更することにより

  // 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' 
       }, 
  

  • ：

    それはテンプレートmaniuplationを制御していたかを確認しようとする角度-FullstackプロジェクトにGruntfile.jsを見ると

  、それは次の行が含まれてい属性はすべて偽になり、問題は解決されました。

• これらを1つずつ順番に変更していくうちに、最初の行が問題を引き起こしているように見えました。単にこれをfalseに変更し、他のすべてを真にして問題を解決しました。

• このブール値の属性の折りたたみ機能は、何らかの理由で「無効」という単語を上書きする必要があります（スペルを「dizabled」に変更し、テンプレートで変更されていない問題を引き起こしている言葉自体でした）。深く掘り

• 、Gruntfileは、HTMLのminifierを使用している - collapseBooleanAttributesにリンクされている以下の注意事項があり、そのgithubの家を見て：

崩壊ブールは HTML 4.01は、いわゆるブール属性 - を持っている属性「選択された」、「無効にされた」、「チェックされた」などである。これらは、属性値が完全に省略された、最小化された（折りたたまれた）たとえば、<input disabled="disabled">と書く代わりに、<input disabled>と書くだけです。

はMinifierはcollapseBooleanAttributesと呼ばれるこの最適化を実行するためのオプション、している：彼らは唯一、自分の名前であり、これは、彼らが真である意味一つの値を持つことができるという点で

ブール属性は奇妙です。値の部分をスキップすることができます（disabled = "disabled"の代わりに、それ自身で無効にすることができます）。これは同じ効果を持ちます。したがって、このminificationテクニック（http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2を参照してください）。

HTMLでdisabled属性をfalseに設定する方法は、単にAnglerStrapが（上記の最初の手順で説明したようにブラウザの最終HTMLでAngularStrapが行うものとはまったく異なります。

上記のようにAngular-fullstackのgruntfileを変更することで元の問題を解決できますが、単にdifferntアプローチを使用してAngularStrapで解決することもできます。私は両方のプロジェクトでそれをリースし、決定させます。

誰かが共有するより詳細な説明を持っている場合は、この回答を受け入れないようにします。