当参数存在时如何提供单独的“模板”？

Question

我有一个方案来处理参数。（当参数存在时，它会以不同的方式处理）

那么，我如何保留2个模板并根据需要使用它们呢？目前我正在这样尝试，根本不起作用。

有人帮帮我吗？

我用2个模板的状态：（请帮我更正）

.state('serialCreateCase', {
    url: '/serialCreateCase?sn=',
    views:{
      "" : {
        "templateUrl": 'app/login/loginWithSerial.html'
      },
      "?sn=" : {
        "templateUrl": 'app/login/login.html'
      }
    }
 })

这里有两种情况的重定向：（如果我错了请纠正我）

if(!$rootScope.isUserLoggedIn && toParams.sn !== undefined ) {

    console.log('dont take action', toState, toParams.sn );
    $rootScope.canNavigate = true;
    $state.go('serialCreateCase'); //works
    $state.go('serialCreateCase', {sn:'1234'}); //not works
    event.preventDefault();
    return;

 }

Answer 1

有个working plunker

我会说你需要用

替换 templateUrl

Templates

TemplateUrl ...

templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.

TemplateProvider

Or you can use a template provider function which can be injected, has access to locals, and must return template HTML, like this...

还有更多的细节和坑

Angular UI Router: decide child state template on the basis of parent resolved object

这个我最喜欢

...
templateProvider: [$stateParams, '$templateRequest',
  function($stateParams, templateRequest) 
  {
    var tplName = "pages/" + $stateParams.type + ".html";
    return templateRequest(tplName);
  }
],

（勾选）因为它也使用$templateRequest

延长

有个working plunker

这可能是状态 def

  .state('serialCreateCase', {
    url: '/serialCreateCase?sn',
    views: {
      "": {
        templateProvider: ['$stateParams', '$templateRequest',
          function($stateParams, templateRequest) {
            var tplName = "app/login/loginWithSerial.html";
            if($stateParams.sn){
               tplName = "app/login/login.html";
            }
            return templateRequest(tplName);
          }
        ]
      },
    }
  });

我们真正需要的是始终传递一些值，如sn。所以，这些应该是调用：

  // we need to pass some value, to be sure that there will be other than last
  <a ui-sref="serialCreateCase({sn: null})">
  // here is reasonable value
  <a ui-sref="serialCreateCase({sn:'1234'})">

检查here 实际操作

Answer 2

使用，$stateParams代替toParams，

1) 根据参数（您的要求）确定模板

.state('serialCreateCase', {
        url: '/serialCreateCase?sn=',
        views: {
            '': {
                templateUrl: function(stateParams) {
                    var param = stateParams.sn
                    return (param == undefined) ? 'app/login/loginWithSerial.html' : 'app/login/login.html'
                },
                controller: 'myController',
            }
        }
      })

您可以使用templateUrl的参数检查stateParam，并更改模板。

2) 根据来自控制器的参数更改状态。

这是一个示例控制器，您可以在其中检查 state parameter 并根据需要使用重新指示。

allControllers.controller('myController', ['$scope','$rootScope','$state','$stateParams',
    function($scope,$rootScope,$state,$stateParams) {
        if(!$rootScope.isUserLoggedIn)
        {
            if($stateParams.sn !== undefined )  
            {
                alert('dont take action', $stateParams.sn );
            }
            else
            {
                alert('You can redirect, no parameter present');    
            }

        }
    }   
}])

当参数存在时如何提供单独的“模板”？

How to supply the separate `template` when param exist?

state

angularjs

angular-ui-router

Templates

TemplateUrl ...

TemplateProvider

延长