Question

我继承了一个Angular项目。我从来没有真正搞过Angular，但是对MVC的了解已经足够让我觉得我可以学习了。我的问题是我有一个JSON对象的属性，我想为其返回不同的视图。（一个是归档状态，一个是非归档状态）由于它们都有不同的视图模板，如果json.status == 'archived'

，我将如何返回非归档模板

我将以下内容作为我当前的StateProvider的templateURL属性。

templateUrl: appConfig.viewPath + 'non-archived.html?v=' + appConfig.version

我应该在这里返回多个模板网址吗？或者我是否必须创建一个全新的URL路径？

谢谢！

Answer 1

我已经走了几次这条路，我不认为我已经找到了最佳方式，但我已经学到了一些东西。

这完全取决于你何时可以访问你的json-object。你可以将一个函数传递给templateUrl，然后发送一个服务..（一个返回你当前json-object的服务可能很棒，但你怎么更新呢？可能你改变了路线吗？那么你有一个egg-hen问题。在你拥有json-object之前你不能决定路由，但是在改变路由之前你没有json-object。）

但是如果你有权访问json-object，你可以这样做：

templateUrl: function(){
    var tpl = (json.status == 'archived') ? 'archived.html?v=' : 'non-archived.html?v=';
    return appConfig.viewPath + tpl + appConfig.version
}

但我的猜测是，在路由加载之前，你无法访问json-object。

然后我会说最简单的方法（但可能不那么漂亮）就是只有一个模板。控制器中的$scope.json = json：

<div ng-if="json.status == 'archived'"> 
    <h1>ARCHIVED</h1>
    ...
</div>

<div ng-if="json.status != 'archived'"> 
    <h1>NOT ARCHIVED</h1>
    ...
</div>

或者如果您认为太便宜，请声明两条路线。整个"create a whole new url path"并不像你想象的那么痛苦。它比在路由加载之前楔出一个值要复杂得多。

Answer 2

1：试试这个。 在$stateParams中发送 json.status 并在stateProvider 中应用条件：

$stateProvider.state('home', {
  templateProvider: ['$stateParams', 'restService' , function ($stateParams, restService) {
    restService.getJson().then(function(json) {
        if (status.status == 'archived') {
              return '<div ng-include="first.html"></div>';
        } else {
              return '<div ng-include="second.html"></div>';
        }
    })
  }]
});

2：或者只是在视图中你可以试试这个：

<div ng-if="json.status == 'archived'"> 
    <h1>ARCHIVED</h1>
    ...
</div>

<div ng-if="json.status != 'archived'"> 
    <h1>NOT ARCHIVED</h1>
    ...
</div>

角度条件视图？

2 个答案: