Question

我的主视图，主页，链接到另一个视图，下载。我的主页视图上有两个按钮，“免费试用”和“下载”，两者都指向下载视图，但我希望下载视图的第一段由区分两个按钮的参数确定。

我如何实现这一目标？我想也许可以使用两个控制器，但我是AngularJS的新手并且想知道是否有更好的方法。

Answer 1

假设我理解正确...

理论上可以让两个页面由同一个控制器管理，但如果它们是2个单独的视图，那么这不是最佳实践，并且在任何情况下，控制器都被认为是短暂的。＆＃34;角度方式＆＃34;在控制器之间传递数据是服务。所以你会做这样的事情：


app.factory('DownloadType',function() {
   return {
      type:"free"  
   };
   // just used "free" as a default
})
.controller('Home',function($scope,DownloadType) {
   $scope.setType = function(type) {
      DownloadType.type = type;
   };
})
.controller('Download',function($scope,DownloadType) {
   $scope.type = DownloadType.type;
})
;

然后你的主页模板看起来像：

<button ng-click="setType('free')">Free</button>
<button ng-click="setType('paid')">Paid</button>

以及您的下载模板

<div ng-show="type === 'free'">This is a free download</div>
<div ng-show="type === 'paid'">You are paying us! We love you!</div>

有一些更清洁的方法，例如如果您只需要单击一下即可转到页面并进行设置：


.controller('Home',function($scope,$location,DownloadType) {
   $scope.setType = function(type) {
      DownloadType.type = type;
      $location.path('/download');
   };
})

最后，如果您想在一个视图中使用它们，那么您根本不需要该服务，因为您只有一个带有单个控制器的视图。

Answer 2

您的要求可以通过使用ui-router的嵌套视图来完成。示例代码，

$stateProvider
.state('home', {
  url: "/",
  templateUrl: "templates/home.html"
})
    .state('product', {
        url: "/product",
  templateUrl: "templates/product.html"
    })
.state('product.trial', {
  url: "/product/trial",
  templateUrl: "templates/product.trial.html"
})
.state('product.download', {
  url: "/product/download",
  templateUrl: "templates/product.download.html"
})

现在在product.trial.html＆amp; product.download.html，只放置你的第一段和在product.html中，放置此代码::::

//the code snippet that is common for all views....
<div ui-view>

基于路由参数的AngularJS页面内容（相同视图）

2 个答案: