在 ng-view 页面中创建控制器答案

【问题标题】：create controller in ng-view page在 ng-view 页面中创建控制器
【发布时间】：2016-03-24 14:50:27
【问题描述】：

我想管理特定于 ng-view 页面的控制器，因此我将控制器放在 ng-view 页面中并仅使用特定于该页面的控制器。但是，该代码并未显示该控制器应显示的内容。

这是我的情况。我将代码分成 3 个文件，分别是“mainfile.php”、“page1file.php”和“page2file.php”。 “mainfile.php”包含路由到第 1 页和第 2 页的主页。为了比较结果，我为这 2 个页面创建了不同的条件。 “page1file.php”使用的是在“mainfile.php”中定义的控制器，而“page2file.php”使用的是在页面本身中定义的控制器。 p>

在这种情况下，“page1file.php”成功显示了我想要的内容，但“page2file.php”没有显示它应该显示的内容。请帮助我并给出一个非常简单的解释和一个简单的解决方案，因为我对 angularjs 很陌生。

这是我的代码。您可以复制它们并在您的 php 服务器上运行它。

mainfile.php：

<!DOCTYPE html>
<html>
<head>
    <title>learn angular routing</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script type="text/javascript">
        function routeReload($scope) {
            $scope.routeReloading = function(){
                window.location.reload();
            };
        }
        routeReload.$inject = ['$scope'];

        function routeConfig($routeProvider) {
            $routeProvider
                    .when('/one',{
                        templateUrl:'page1file.php'
                    })
                    .when('/two',{
                        templateUrl:'page2file.php'
                    })
                    ;
        }
        routeConfig.$inject=['$routeProvider'];

        function testOne($scope) {
            $scope.name = "page one";
        }
        testOne.$inject = ['$scope'];

        var testNgView = angular.module('testNgView',['ngRoute']);
        testNgView.config(routeConfig);
        testNgView.controller('routeReload',routeReload);
        testNgView.controller('testOne',testOne);
    </script>
</head>
<body>
    <div ng-app="testNgView">
        <div ng-controller="routeReload">
            View page <a ng-click="routeReloading();" href="#one">one</a> or
            <a ng-click="routeReloading();" href="#two">two</a>
            <div ng-view></div>
        </div>
    </div>
</body>
</html>

page1file.php：

<div ng-controller="testOne">
    This is {{name}}
</div>

page2file.php：

<script type="text/javascript">
    function testTwo($scope) {
        $scope.name = "page two";
    }
    testTwo.$inject = ['$scope'];
    testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
    This is {{name}}
</div>

【问题讨论】：

控制台有错误吗？
我检查元素，它显示如下“这是{{name}}”
所以没有错误？
您确定testNgView 在您的第二页范围内吗？
你在哪里定义控制器'testTwo'？

标签： javascript php jquery html angularjs

【解决方案1】：

我认为您不能在视图模板中内联脚本模块。看看你的应用程序的这个工作版本，我会如何组织它：

http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview

您可以使用 .php 文件代替 .html 文件，这应该没什么区别。

所以你的主文件应该是这样的：

<!DOCTYPE html>
<html>
<head>
    <title>learn angular routing</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
    <div ng-app="testNgView">
        View page <a href="#/one">one</a>
        or <a href="#/two">two</a>

        <ng-view></ng-view>
    </div>

    <script src="app.module.js"></script>
    <script src="app.routes.js"></script>
    <script src="views/page1/controller.js"></script>
    <script src="views/page2/controller.js"></script>
</body>
</html>

如果您的目标是使用 PHP 动态呈现您的控制器，请参阅此 SO 问题的答案：Angularjs: server side (php) rendering and data binding client side after an event

您可能还对这篇关于在应用程序启动后加载 Angular 组件的文章感兴趣：http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm

TL;DR：您需要在配置阶段存储对$controllerProvider 的引用，然后在您的内联脚本中调用$controllerProvider.register('MyController', MyController)。不过，我不确定我对此有何感想……

【讨论】：

是的，感谢您的回答。但就我而言，我不想在 mainfile 中定义 testTwo 控制器，而是直接将它放在 page2file 中。假设我有 20 个路由页面，每个页面都有不同的控制器定义。如果我将控制器放在每个页面中，管理它们会更容易，不是吗？
对，但是您在 page2file 中引用了未在此处定义的模块变量。相反，使用 angular.module('testNgView').controller('testTwo', testTwo);
好吧，你的代码管理方式比我的好。它肯定是一个干净的代码。非常感谢。我将在我的代码中使用它。
谢谢！如果回答对你有帮助，请采纳。