Question

我正在开发一个SPA，其中数据存储在JSON文件中。 JSON文件还包含指向包含ID的页面的链接。每当用户搜索ID时，应加载与该id对应的页面内容。怎么做？

Answer 1

您的搜索实现应该是单独的，也许是指令。没有好的答案，除非你已经有了一些工作。

但是，动态模板加载可以通过一种方法实现，该方法允许您读取URL参数，例如ID，并相应地重定向。其中一种方法是$ location，而最适合你的方法是 $ routeParams 。

以下是一个例子：

const app = angular.module("app", ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.
  when('/some_path/:ID', {
    templateUrl: 'templates.html',
    controller: 'templateCtrl'
  });
}

（对于更高级的控制，将ngRoute切换到ui-router库并相应调整）

有了这个，一旦您的网址位于www.example.com/some_path/10，它就会将您重定向到$ pageParams.ID值为＆＃34; 10＆＃34;的页面。

在模板控制器中，您可以使用$ routeParams加载JSON文件并相应地填写页面的$ scope值。

app.controller("templateCtrl", function ($scope, $routeParams, $http) {
  var id = $routeParams.ID;
  $http.get('myFile.json').
  then((res) => {
    // match your ID and load the data
    let data = res.data;
    let model;
    for (let i = 0; i<data.length; i++){
      if (data[i].id == id){
        model = data[i].content;
        break;
      }
    }
    $scope.model = model;
  });
});

如果您希望等到数据加载后，在显示页面内容之前，请在配置中使用加载JSON文件的相应工厂/服务解决。

以角度js动态更改模板URL

1 个答案: