在ng视图页面中创建控制器

create controller in ng-view page

本文关键字：创建 控制器 ng 视图      更新时间：2023-09-26

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

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

在这种情况下，"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>

我认为您无法在视图模板中内联脚本模块。看看这个工作版本的应用程序，我会组织它的方式：

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：事件后的服务器端（PHP）渲染和数据绑定客户端

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

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

相关文章：