Question

我已经设置了一个特殊的angular路由，这是许多静态页面的单一路由，（想想隐私策略，客户端html，我希望我的客户能够作为html页面放入文件夹中，并且动态用路由加载它。

当您在地址栏中输入内容时，我告诉有角度去查看目录并找到 $ routeParams.name 的 .html 文件并加载它

这很好但我将数据替换为空白页面。的 blank.html

App.js

.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);

$routeProvider.when('/test', {
  controller : 'AppRepeatCtrl',
  templateUrl : './templates/test_tpl.html'
}).when('/:name', { 
  controller: 'DynamicRoutes',
  templateUrl: 'partials/blank.html'
}).otherwise({
  redirectTo: '/'
});

}）

Controllers.js

function DynamicRoutes ($scope, $http, $location, $route, $routeParams, $compile, appLoading) {
  if ($routeParams.name == '' ) {
     $route.current.templateUrl = 'partials/' + "home.html";
  }  else {
     $route.current.templateUrl = 'partials/' + $routeParams.name + ".html";
  }

  $http.get($route.current.templateUrl).then(function (msg) {
    if (msg.data.contains('html')) {
        $http.get('partials/error.html').then(function (msg) {
            $('#ng-view').html($compile(msg.data)($scope));
        });
    } else {
        appLoading.ready();
        $('#ng-view').html($compile(msg.data)($scope));

    }
});
};

我的问题是，有没有办法从部分加载页面，而不必加载空白模板，然后用静态页面替换html。因为我正在做动画，动画因为替换而变得僵硬。我真的需要加载页面而不必替换blank.html模板页面，或者在视图开始ng-animate之前替换blank.html

$（'＃ng-view'）。html（$ compile（msg.data）（$ scope））; 是我认为导致页面替换html而没有ng-动画进入视图完成。

因为如果你把它改成$（'＃ng-view'）。append（$ compile（msg.data）（$ scope））;

你可以看到2 x和1有动画但是一旦附加发生，动画就会停止。

Answer 1

首先，不要在控制器中加载模板，这不是角色方式。

您不需要加载blank.html只是因为您必须提供模板，templateUrl可以是一个函数，您可以在其中确定要加载的模板。

$routeProvider.when('/:name', {
    controller : 'DynamicRoutes',
    templateUrl : function (params) {
        console.log(params); // check the console to see what are passed in here

         //return a valid Url to the template, and angular will load it for you
    }
});

在角度和附加内容中动态更改路线

1 个答案: