如何解决具有依赖性和可能冲突的两个控制器

Question

作为 AngularJS 的新手，我不确定结构或语法是否可以让我尝试做的事情发挥作用。这是在 AngularJS.

中重新创建现有站点的尝试

我相信我实际上有两个问题：

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);
    };
});

Answer 1

您可以使用 angularjs 的活动。

在一个控制器中使用来自 $rootScoope 的 $broadcast
使用来自其他控制器本地 $scope 的 $on 进行监听。

Angular events reference

Answer 2

我知道我是 AngularJS 的新手，也许我想做的不一定是最佳实践或利用 Angular 的全部功能，但我确实找到了解决我在这里要做的事情。

虽然 ui-router 和 $broadcast 建议可能是处理更复杂场景的好方法，但我的场景相当简单。

在 HTML 方面，我最终使用带有 ng-bind-html 的标签从控制器获取信息到我的视图。为每个标签集使用 ng-controller，我可以指定控制器而不会发生冲突。

为了让 CustomController 引用 UniversalController，我只是将所需函数设为普通 Javascript 函数，在控制器外部，但在同一个文件中。这允许与它一起包含的其他脚本使用该函数，而无需像实际事件那样需要 $scope。

如何解决具有依赖性和可能冲突的两个控制器

How to resolve two controllers with dependency and possible conflict

html

dependencies

function

controllers

angularjs