个人中心
gpt4 book ai didi

javascript - 使用 routeProvider 的模板的多个 Controller

转载 作者：行者123 更新时间：2023-11-29 10:15:46 25 4
gpt4 key购买 nike

我开始使用 AngularJS 开发我的第一个大项目，在考虑应用程序的设计时，我发现了一些我不理解的东西。

我考虑的是单页应用，所以我使用 ng-view 和 routeProvider 将每个查询路由到正确的模板和 Controller 。然而，我的一些模板有点复杂，我首先想到使用不同的 Controller 来管理每个模板。也就是说，同一模板的不同部分将由不同的 Controller 管理。问题(或者至少，我认为是问题所在)是 routeProvider 只允许将一个模板关联到一个 Controller 。这让我觉得除了我在使用 routeProvider 的路由配置中指定的 Controller 之外，我不能将另一个 Controller 用于模板。

然后我开始想办法重构 future 的项目，这样我就可以在由单个 Controller 管理的同一模板中维护每个不同的功能，并且仍然让它们之间的 Controller 交互。

在经历了一些头痛之后，我决定尝试实现我的第一种方法，看看它是如何失败的，以及……多么令人惊讶!它工作得很好!但是，我不知道为什么。

让我向您展示这个简单的例子:

script.js

angular.module('myApp', [
  'ngRoute'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'MainCtrl' 
      });

    $locationProvider.html5Mode(true);
  });

angular.module('myApp')
  .controller('MainCtrl', function ($scope) {
    // whatever...
    });
  });

angular.module('myApp')
  .controller('FirstCtrl', function ($scope) {
      $scope.first = function(){
           alert("First");
      };
    });
  });

angular.module('myApp')
  .controller('SecondCtrl', function ($scope) {
      $scope.second= function(){
           alert("Second");
      };
    });
  });

ma​​in.html

<div ng-controller="FirstCtrl">
    <button ng-click="first()">First!</button>
</div>

<div ng-controller="SecondCtrl">
    <button ng-click="second()">Second!</button>
</div>

index.html

<body ng-app="myApp">
    <div ng-view=""></div>
</body>

我认为如果您将路由配置为将“主”模板关联到“MainCtrl” Controller ，那将是与模板交互的唯一 Controller ，但事实并非如此。

我最初以为找不到“first”和“second”函数，因为“FirstCtrl”和“SecondCtrl”没有在路由配置中声明。我认为 routeProvider 可能会“包装”(或类似的东西)“主”模板和“MainCtrl” Controller ，而“主”模板将无法访问其余 Controller 。

但这不正确，来自不同 Controller 的“第一”和“第二”功能可以正常工作。那么，在路由配置中为模板指定 Controller 有什么意义？您可以只设置一个模板来呈现指定的查询，并且该模板可以使用模块的任何 Controller 。

也许这不是一个好的设计，我不知道。

你能帮助我更好地理解这一点吗？

谢谢!

最佳答案

如您所述使用 $route 提供程序时:

.config(function ($routeProvider, $locationProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'main',
    controller: 'MainCtrl' 
  });

$locationProvider.html5Mode(true);  });

您实际上将所有内容包装在 './' 中使用 MainCrtl 进行路由。

因此，当您在 <div ng-view=></div> 中注入(inject) Main.html View 时你得到以下渲染:

 <body ng-app="myApp">
    <div ng-controller='MainCtrl'>    
       <div ng-controller="FirstCtrl">
       <button ng-click="first()">First!</button>
       </div>

       <div ng-controller="SecondCtrl">
       <button ng-click="second()">Second!</button>
       </div>
    </div>

 </body>

关于javascript - 使用 routeProvider 的模板的多个 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22273882/

25 4 0
文章推荐： javascript - 计算不包括空格的段落数
文章推荐： java.lang.ClassCastException : java. lang.StackOverflowError 无法转换为 java.lang.Exception
文章推荐： mysql - 尝试合并表时出现 Access 错误
文章推荐： java - 在java中计算两个日期之间的月份
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com