2017-09-08 15 views
0

AngularJSを初めて使用しているため、私が動作させようとしているものを得るための構造や構文が不明です。これは、AngularJSの既存のサイトを再作成しようとする試みです。 )設計により依存関係と矛盾する可能性のある2つのコントローラを解決する方法

1)カスタムコントローラ(ユニバーサルコントローラから関数を使用している:

私は実際には二つの問題を抱えていると信じています。私は、あるコントローラが他のコントローラを参照できるようにする方法を知る必要があります。適切なスコープと特定の構文が必要であると確信しています。

2)ユニバーサルコントローラ機能を使用するカスタムコントローラ機能を削除すると、それでも機能していないように見えますが、カスタムコントローラが呼び出されると停止します。

コードは以下の

は、利便性のために編集: HTML:

<!DOCTYPE html> 
    <html> 
     <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
      <script language="JavaScript" src="./Universal.js" runat="server"></script> 
      <script language="JavaScript" src="./Custom.js" runat="server"></script> 
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
      <link href="./Main.css" rel="stylesheet" type="text/css"> 
     </head> 
     <body id="idBody" ng-app="Universal"> 
      <table id="idTableMain"> 
       <tr id="idHeaderRow"> 
        <td id="idHeaderRowCenter" colspan="3" ng-controller="UniversalController"> 
         {{TitlePicture()}} 
        </td> 
       </tr> 
       <tr id="idNavigationRow"> 
        <td id="idNavigationBar" colspan="3" ng-controller="UniversalController"> 
         {{NavBar()}} 
        </td> 
       </tr> 
       <tr id="idCenterRow" ng-controller="UniversalController"> 
        <td id="idCenterRowLeft" ng-controller="CustomController"> 
         {{GetNavigationHeader()}} 
         <any> 
    {{GetNavigation(0)}} 
</any> 
        </td> 
        <td id="idCenterRowMain"> 
         <any ng-controller="CustomController"> 
          {{Title(0)}} 

         </any> 
        </td> 
        <td id="idCenterRowRight"> 
         {{GetInformationHeader()}} 
         {{GetInformation()}} 

        </td> 
       </tr> 
       <tr id="idFooterRow"> 
        <td id="idFooterMain" colspan="3"> 
         <p id="idFooterContent" ng-controller="UniversalController"> 
          {{Footer()}} 
         </p> 
         <p id="idFooterManagement" ng-controller="UniversalController"> 
          {{WebMaster()}} 
         </p> 
        </td> 
       </tr> 
      </table> 
     </body> 
    </html> 

Universal.js:

var Universal = angular.module("Universal", []); 

Universal.controller("UniversalController", ['$scope', '$sce', function ($scope, $sce) 
    { 

     $scope.WriteHeader = function() 
     { 
      $scope.vResult = "<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>"; 
      $scope.vResult += "<link href='"+GetPath(vLevel-1)+"moo.css' rel='stylesheet' type='text/css'>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.TitlePicture = function(vLevel) 
     { 
      $scope.vResult = "<img src='"+$scope.GetPath(vLevel)+"logo_HouseThatKamuraiBuilt_blueonblack.jpg' >"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.NavBar = function() 
     { 
      $scope.vResult = "<a href='"+GetPath(vLevel)+"Index.html'>Home</a>"; 
      $scope.vResult += "<a href='"+GetPath(vLevel)+"Section1/Index.html'>Web Programming</a>"; 
      $scope.vResult += "<a href='"+GetPath(vLevel)+"Section2/Index.html'>Private Projects</a>"; 
      $scope.vResult += "<a href='"+GetPath(vLevel)+"Section3/Index.html'>Downloadable Projects</a>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.GetNavigationHeader = function() 
     { 
      $scope.vResult = "<h4>"; 
      $scope.vResult += "Navigation"; 
      $scope.vResult += "</h4>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.GetInformationHeader = function() 
     { 
      $scope.vResult = "<h4>"; 
      $scope.vResult += "Information"; 
      $scope.vResult += "</h4>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.GetInformation = function() 
     { 
      $scope.vResult = "This was written in AngularJS.<br><br>"; 
      $scope.vResult += "Other versions of this page are here:<br>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.GDR = function() 
     { 
      $scope.vResult = "<a href='http://htkb.dyndns.org/Section3/downloads/GDR.zip'>You can download my Games Development Report here.</a></br>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.WinRAR = function() 
     { 
      $scope.vResult = "<a href='http://htkb.dyndns.org/Section3/downloads/wrar371.exe'>You may need WinRar to open zip files from this site.</a></br>"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.Footer = function() 
     { 
      $scope.vResult = "© Copyright 2012 All rights reserved<br>";  
      $scope.vResult += "House That Kamurai Built"; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.WebMaster = function() 
     { 
      $scope.vResult = "Website managed by Kamurai."; 
      return $sce.trustAsHtml($scope.vResult); 
     }; 

     $scope.GetPath = function(vLevel) 
     { 
      if(vLevel <= 0) 
      { 
       $scope.vResult = "./"; 
      } 
      else if(vLevel == 1) 
      { 
       $scope.vResult = "../"; 
      } 
      else if(vLevel == 2) 
      { 
       $scope.vResult = "../../"; 
      } 
      else if(vLevel == 3) 
      { 
       $scope.vResult = "../../../"; 
      } 
      else if(vLevel == 4) 
      { 
       $scope.vResult = "../../../../"; 
      } 
      else if(vLevel == 5) 
      { 
       $scope.vResult = "../../../../../"; 
      } 
      else if(vLevel == 6) 
      { 
       $scope.vResult = "../../../../../../"; 
      } 
      else if(vLevel == 7) 
      { 
       $scope.vResult = "../../../../../../../"; 
      } 

      return $scope.vResult; 
     }; 
    }]); 

Custom.js:

angular.module('Universal', []).controller('CustomController', ['$scope', '$sce', function ($scope, $sce) 
{ 

    $scope.Navigation = function(vLevel) 
    { 
     $scope.vResult = ""; 
     $scope.vResult += "<span class='navlink'>"; 
      $scope.vResult += "<a href='"+$scope.GetPath(vLevel)+"AboutUs.html'>About Us</a>"; 
     $scope.vResult += "</span>"; 
     $scope.vResult += "<br>"; 
     $scope.vResult += "<span class='navlink'>"; 
      $scope.vResult += "<a href='"+$scope.GetPath(vLevel)+"Media.html'>Media</a>"; 
     $scope.vResult += "</span>"; 
     $scope.vResult += "<br>"; 
     $scope.vResult += "<span class='navlink'>"; 
      $scope.vResult += "<a href='"+$scope.GetPath(vLevel)+"Minecraft.html'>Minecraft!</a>"; 
     $scope.vResult += "</span>"; 
     $scope.vResult += "<br>"; 
     return $sce.trustAsHtml($scope.vResult); 
    }; 

    $scope.Title = function(vPage) 
    { 
     $scope.vResult = ""; 
     $scope.vResult += "<title>"; 
      if(vPage <= 0) 
      { 
       $scope.vResult += "HTKB Home Page"; 
      } 
     $scope.vResult += "</title>"); 
     return $sce.trustAsHtml($scope.vResult); 
    }; 

    $scope.Header = function(vPage) 
    { 
     $scope.vResult = ""; 
      if(vPage == 0) 
      { 
       $scope.vResult += "<h2>"; 
        $scope.vResult += "<u>"; 
         $scope.vResult += "Welcome to the House That Kamurai Built!"; 
        $scope.vResult += "</u>"; 
       $scope.vResult += "</h2>"; 
      } 
     return $sce.trustAsHtml($scope.vResult); 
    }; 

    $scope.Content = function(vPage) 
    { 
     $scope.vResult = ""; 
     $scope.vResult += "<p align='left'>"; 
      if(vPage == 0) 
      { 
       $scope.vResult += "The House That Kamurai Built is an entertainment company with the primary focus "; 
       $scope.vResult += "of increasing awesome by stimulating intelligent conversation and entertainment via discussion and "; 
       $scope.vResult += "game design.<br>"; 
       $scope.vResult += "Increase the Awesome with us!<br>"; 
      } 
     $scope.vResult += "</p>"; 
     return $sce.trustAsHtml($scope.vResult); 
    }; 

    $scope.Versions = function(vPage) 
    { 
     $scope.vResult = ""; 
     if(vPage == 0) 
     { 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org/index.html\'>HTML</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org/Javascript/index.html\'>HTML Javascript</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:81/ASP/index.asp\'>ASP Javascript</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:81/ASPNET/index.aspx\'>ASP.NET Javascript</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org/index.shtml\'>Perl</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:8080/JSPApplication/index.jsp\'>JSP</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:8080/JSFApplication/index.xhtml\'>JSF</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:81/WebApplication/index.cshtml\'>ASP.NET Web App</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:81/WebForm/index.aspx\'>ASP.NET Webform</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org:81/MVC/Main/index\'>ASP.NET MVC App</a><br>"; 
      $scope.vResult += "<a href=\'http://htkb.dyndns.org/SSI/index.html\'>Apache SSI</a><br>"; 
     } 
     return $sce.trustAsHtml($scope.vResult); 
    }; 
}); 
+0

'ui-router'を使用して状態や部分を制御することを検討しましたか? – Icycool

+0

これは文字通り私がui-routerについて聞いた最初のものであり、私はあなたが州と部分的に何を意味しているのか分からない。ありがとう、私は今何を研究するのか知っています。 – Kamurai

答えて

0

私はAngularJSに新たなんだと、多分私がやろうとしていることは必ずしもベストプラクティスではないか、角度のパワーをフルに活用し、私は周りの仕事を見つけたことを取得私がここで何をしようとしているのか

ui-routerと$ broadcastは、おそらくもっと複雑なシナリオに向かう良い方法ですが、かなり単純なシナリオです。

HTML側では、ng-bind-htmlでタグを使用して情報をコントローラから取得しました。これらのタグセットのそれぞれにng-controllerを使用することで、コンフリクトのないコントローラを指定できます。

CustomControllerにUniversalControllerを参照させるために、コントローラの外部ではなく、同じファイル内にある通常のJavascript関数を作成しました。これにより、実際のイベントの場合と同じように$スコープを必要とせずに、その横に含まれる他のスクリプトがその機能を使用できるようになります。

0

あなたはangularjsのイベントを使用することができます。

1つのコントローラ
  • で$ rootScoopeから
    • 使用$放送は、他のコントローラ内のローカル$の範囲から$上を使用して聞きます。

    Angular events reference

  • +0

    うわー、これはたくさんのように見えますが、ありがとうございます。私はもう一つの良い道を探しています。 私はそれが私のために働くことを確認した後、答えとして選択します。 – Kamurai

    関連する問題