Question

我的网页不是通过在angular.js中使用ng-view来实现的。当我输入网址http://localhost:8888/dashboard时，页面应该来了。我正在解释下面的代码。

查看/ dashboard.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="adminDashboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" /><!-- Vector Map -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" /><!-- Carousal -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->  
</head>

<body ng-view> 


</body>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/enscroll.js"></script>
<script type="text/javascript" src="js/grid-filter.js"></script>
<script type="text/javascript" src="app/routes/dashboard-route.js"></script>
<script type="text/javascript" src="app/controller/dashboard-controller.js"></script>
</html>

公共/应用/路由/仪表板route.js：

var dashboard=angular.module('adminDashboard',[]);
dashboard.config(['$routeProvider',
function($routeProvider){
    $routeProvider.
    when('/dashboard',{
        templateUrl:'app/view/dashboard-partial.html',
        controller:'dashboard-controller'
    });
}
])

公共/应用/控制器/仪表板controller.js：

var dashboard=angular.module('adminDashboard',[]);
dashboard.controller('dashboard-controller',function($scope){
    $.ajax({
        type:'GET',
        url:"/getAdminData",
        success: function(data){
            $scope.firstname=data.firstname;
            $scope.lastname=data.lastname;
            $scope.adminImage=data.image;
        },
        error: function(data){
            console.log(data);
        }
    });
});

请帮我解决此问题，以便模板成功显示。我也使用node.js作为客户端服务器架构。

Answer 1

看起来您的dashboad-route.js正在使用<p>，但您的HTML文件名称为templateUrl:'app/view/dashboard-partial.html'。将templateUrl更改为view/dashboard.html（或任何正确的路径），看看是否能解决问题。

Answer 2

一个问题是，如果使用.ui-sortable-placeholder{ visibility: hidden !important; }进行范围更改，则angular不知道它们，因此您需要使用$.ajax告诉angular运行摘要循环。

因此我建议您不要使用$apply()并使用有角度的$.ajax

无法使用Angular.js通过ng-view显示页面

2 个答案: