Angular 单击以显示包含所单击项目的信息的新页面 JSON

Question

我有一个产品页面，有一个 'quick view' 选项可以在模式中打开产品描述和图像。我还有一个 'full details' 按钮，我希望根据项目代码将用户带到一个新的 URL，但也显示来自我的 JSON 的点击产品的信息。这是我的：

<a ng-click="store.selected = product" ng-href="{{store.selected.code}}.html" class="btn btn-sm">Full details</a>

Modal 的一切都很好，所以我假设移动到不同的页面并传递此信息时出现问题？我在 Plunker 中对其进行了模拟以显示问题：

Plunker here

如有任何帮助，我们将不胜感激。

Answer 1

您应该 consider using ng-route to switch the view to a different html file. But you can also use ng-include 少一些设置。

单击 Full details link 时，切换一个变量来跟踪是否应显示图库或详细信息。然后，构造要显示的 html 模板的路径：

$scope.setSelection = function(product) {
  $scope.store.selected = product; 
  $scope.detail.show = !$scope.detail.show; 
  $scope.detail.source = product.code + '.html'
}

然后，使用ng-include显示模板：

<div ng-if="detail.show" ng-include="detail.source">
</div>

这是您的 plunker 的更新：http://plnkr.co/edit/zhsY6TAjONewyInGiwUC?p=preview

请注意，模板应该只是 html 的片段。您不需要再次包含 angular 等脚本。

Angular 单击以显示包含所单击项目的信息的新页面 JSON

Angular click for new page with infomation from clicked item JSON

angularjs

angularjs-directive

angularjs-ng-repeat

angularjs-ng-click