1

我已经为 Angular 设置了一条特殊路由,它是许多静态页面的单一路由(想想隐私政策、客户端 html,我希望我的客户能够将其作为 html 页面放入文件夹并动态加载它路由。

当您在地址栏中键入内容时,我告诉 angular 去查看一个目录并找到一个带有$routeParams.name的.html文件并加载它。

这很好用,但我将数据替换到空白页上。 空白.html

应用程序.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: '/'
});

})

控制器.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。因为我在做动画,所以动画因为替换而变得无聊。我真的需要加载页面而不必替换空白.html模板页面,或者在视图开始之前替换空白.html ng-animate

$('#ng-view').html($compile(msg.data)($scope)); 我认为是导致页面替换 html 而 ng-animate enter-view 没有完成的原因。

因为如果你把它改成 $('#ng-view').append($compile(msg.data)($scope));

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

4

1 回答 1

6

首先,不要在控制器中加载模板,这不是有角度的方式。

您不需要仅仅因为您必须提供模板而加载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
    }
});
于 2013-09-25T20:22:04.923 回答