我已经为 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 有动画,但是一旦发生附加,动画就会停止。