javascript - Angular 应用程序路线不起作用

标签 javascript html angularjs angular-route-segment

目前我有一个 AngularJS Web 应用程序，它的工作方式与我想要的完全一样。我创建了一个加号按钮/链接。我希望用户能够单击该按钮/链接并被带到另一个类似的页面。它将具有完全相同的布局和几乎完全相同的 Controller ，只是提取不同的数据。我相信我已经正确设置了路线，但是当我单击按钮/链接时，它不会执行任何操作或带我去任何地方。

有人可以帮我弄清楚我的路由是不正确还是有其他原因吗？

我的索引文件和我的钻取文件位于同一目录中

索引.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" media="all" href="app.css" />
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/domo.js"></script>
    <script src="js/app.js"></script>      
  </head>
  <body ng-app="rcr_sched" ng-controller="main">
      <div id="mydiv">
        <table>
            <tr>
                <th id="printc"><button id="print" class="fa fa-print fa-2x" onclick="print('#mydiv')"></button></th>
                <th ng-repeat="prop in columns">{{prop.date}}</th>
            </tr>  
            <tr ng-repeat="r in data">
                <td id="linkc">
                <a  href="#/drill">
                    <i class="fa fa-plus-square" aria-hidden="true"></i>
                </a>
                </td>  
                <td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
                    {{r[prop2.title]}}
                </td>
            </tr>
        </table>
      </div>      
  </body>
</html>

钻.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" media="all" href="app.css" />
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/domo.js"></script>
    <script src="js/app.js"></script>                       
  </head>
  <body ng-controller="drill">
      <div id="mydiv">
        <table>
            <tr>
                <th id="printc"><button id="print" class="fa fa-print fa-2x" onclick="print('#mydiv')"></button></th>
                <th ng-repeat="prop in columns">{{prop.date}}</th>
            </tr>  
            <tr ng-repeat="r in data">
                <td id="linkc">
                <a  href="/">
                    <i class="fa fa-plus-square" aria-hidden="true"></i>
                </a>
                </td>  
                <td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
                    {{r[prop2.title]}}
                </td>
            </tr>
        </table>
      </div>      
  </body>
</html>

app.js

var app = angular.module('rcr_sched',['ngRoute']);

 app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
       .when('/',{
           templateUrl: 'index.html',
           controller: 'main'
       })
       .when('/drill',{
           templateUrl: 'drill.html',
           controller: 'drill'
       })
//       .otherwise({redirectTo: '/'});  
    }
 ]);
//Range Error: Maximum call stack size exceeded

app.controller('main', function ($scope) {
        $scope.data = [];
        $scope.columns = [];
        $scope.currentDate = new Date();
        $scope.calculateDate = function() {
            var x = new Date();
            return {
                'MonThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk'},
                'TueThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk'},
                'WedThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk'},
                'ThuThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk'},
                'FriThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk'},
                'MonNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk'},
                'TueNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk'},
                'WedNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk'},
                'ThuNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk'},
                'FriNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk'},
                'Mon2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks'},
                'Tue2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks'},
                'Wed2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks'},
                'Thu2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks'},
                'Fri2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'}
            }
        }
        $scope.isPTO = function(rowTitle, ptoTitle, value) {
            if (rowTitle == (ptoTitle.replace('PTO', '')) && value) {
                return 'background-color: #32CD32;';
            }
            return '';
        }

        function print(elem){
            Popup($('<div/>').append($(elem).clone()).html());
        }

        function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    mywindow.print();
  //  mywindow.close();
    return true;
}

        $scope.dateOptions = $scope.calculateDate();
        $scope.getColor = function(teamRank, team, prop) {
            let today = new Date();

            if (prop == 'Team' || prop == 'TeamMember') 
            {
                if (team == 'Unassigned') 
                {
                    return "grayClass";
                }
                else if (team == 'Gold One') 
                {
                    return "goldClass";
                }
                else if (team == 'Red One' || team == 'Red Two') 
                {
                    return "redClass";
                }
                else if (team == 'Blue One' || team == 'Blue Two') {
                    return "blueClass"
                }
                else if (team == 'Green One') 
                {
                    return "greenClass";
                }
                else
                {
                    return "grayClass";
                }
            }
            if(prop == 'MonThisWk' || prop == 'Mon2Wks')
           {
               if(today.getDay() == 1)
               {
                    return "highlightClass";   
               } 
           }
           if(prop == 'TueThisWk' || prop == 'Tue2Wks')
           {
               if(today.getDay() == 2)
               {
                    return "highlightClass";   
               }
           }
           if(prop == 'WedThisWk' || prop == 'Wed2Wks')
           {
               if(today.getDay() == 3)
               {
                    return "highlightClass";   
               }
           }
           if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
           {
               if(today.getDay() == 4)
               {
                    return "highlightClass";   
               }
           }
            if(prop == 'FriThisWk' || prop == 'Fri2Wks')
           {
               if(today.getDay() == 5)
               {
                    return "highlightClass";   
               }
           }

        }

        domo.get('data/v1/master?fields=Team,TeamMember,TotalJobs,NDD,Past,MonThisWk,TueThisWk,WedThisWk,ThuThisWk,FriThisWk,MonNextWk,TueNextWk,WedNextWk,ThuNextWk,FriNextWk,Mon2Wks,Tue2Wks,Wed2Wks,Thu2Wks,Fri2Wks,FutureDates,PTOMonThisWk,PTOTueThisWk,PTOWedThisWk,PTOThuThisWk,PTOFriThisWk,PTOMon2Wks,PTOTue2Wks,PTOWed2Wks,PTOThu2Wks,PTOFri2Wks,PTOMonNextWk,PTOTueNextWk,PTOWedNextWk,PTOThuNextWk,PTOFriNextWk&groupby=TeamRank,Team,TeamMember&orderby=TeamRank')
            .then(function(data){
                $scope.data = data;
                for (prop in data[0]) {
                    if ($scope.dateOptions[prop]) {
                        var newDate = $scope.dateOptions[prop];
                        var formattedProp = {date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title};
                    }
                    else {
                        var formattedProp = {date: prop, title: prop};
                    }
                    $scope.columns.push(formattedProp);
                }
                $scope.$apply();
            })
    });

app.controller('drill', function ($scope) {
        $scope.data = [];
        $scope.columns = [];
        $scope.currentDate = new Date();
        $scope.calculateDate = function() {
            var x = new Date();
            return {
                'MonThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk'},
                'TueThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk'},
                'WedThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk'},
                'ThuThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk'},
                'FriThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk'},
                'MonNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk'},
                'TueNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk'},
                'WedNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk'},
                'ThuNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk'},
                'FriNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk'},
                'Mon2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks'},
                'Tue2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks'},
                'Wed2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks'},
                'Thu2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks'},
                'Fri2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'}
            }
        }
        $scope.isPTO = function(rowTitle, ptoTitle, value) {
            if (rowTitle == (ptoTitle.replace('PTO', '')) && value) {
                return 'background-color: #32CD32;';
            }
            return '';
        }

        function print(elem){
            Popup($('<div/>').append($(elem).clone()).html());
        }

        function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    mywindow.print();
  //  mywindow.close();
    return true;
}

        $scope.dateOptions = $scope.calculateDate();
        $scope.getColor = function(teamRank, team, prop) {
            let today = new Date();

            if (prop == 'Team' || prop == 'TeamMember') 
            {
                if (team == 'Unassigned') 
                {
                    return "grayClass";
                }
                else if (team == 'Gold One') 
                {
                    return "goldClass";
                }
                else if (team == 'Red One' || team == 'Red Two') 
                {
                    return "redClass";
                }
                else if (team == 'Blue One' || team == 'Blue Two') {
                    return "blueClass"
                }
                else if (team == 'Green One') 
                {
                    return "greenClass";
                }
                else
                {
                    return "grayClass";
                }
            }
            if(prop == 'MonThisWk' || prop == 'Mon2Wks')
           {
               if(today.getDay() == 1)
               {
                    return "highlightClass";   
               } 
           }
           if(prop == 'TueThisWk' || prop == 'Tue2Wks')
           {
               if(today.getDay() == 2)
               {
                    return "highlightClass";   
               }
           }
           if(prop == 'WedThisWk' || prop == 'Wed2Wks')
           {
               if(today.getDay() == 3)
               {
                    return "highlightClass";   
               }
           }
           if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
           {
               if(today.getDay() == 4)
               {
                    return "highlightClass";   
               }
           }
            if(prop == 'FriThisWk' || prop == 'Fri2Wks')
           {
               if(today.getDay() == 5)
               {
                    return "highlightClass";   
               }
           }

        }

        domo.get('data/v1/master?fields=Team,TeamMember,JobNumber,CM,Status,SLDD,MonThisWk,TueThisWk,WedThisWk,ThuThisWk,FriThisWk,MonNextWk,TueNextWk,WedNextWk,ThuNextWk,FriNextWk,Mon2Wks,Tue2Wks,Wed2Wks,Thu2Wks,Fri2Wks,FutureDates,PTOMonThisWk,PTOTueThisWk,PTOWedThisWk,PTOThuThisWk,PTOFriThisWk,PTOMon2Wks,PTOTue2Wks,PTOWed2Wks,PTOThu2Wks,PTOFri2Wks,PTOMonNextWk,PTOTueNextWk,PTOWedNextWk,PTOThuNextWk,PTOFriNextWk&groupby=TeamRank,Team,TeamMember&orderby=TeamRank')
            .then(function(data){
                $scope.data = data;
                for (prop in data[0]) {
                    if ($scope.dateOptions[prop]) {
                        var newDate = $scope.dateOptions[prop];
                        var formattedProp = {date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title};
                    }
                    else {
                        var formattedProp = {date: prop, title: prop};
                    }
                    $scope.columns.push(formattedProp);
                }
                $scope.$apply();
            })
    });

最佳答案

将 href="#/drill" 替换为 href="#!drill"，就可以了!!

关于javascript - Angular 应用程序路线不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44593866/

上一篇：javascript - 为 Violentmonkey 创建 iframe 脚本

下一篇：javascript - 如何在 defaultProps React.Component 类语法中使用 'this' ？

相关文章：

html - 内联 block - 右对齐？

html - 我正在编写一个网站。背景图像的 URL 在 CSS 样式表中。我无法显示图像

javascript - 使用 AngularJS Accordion 展开/折叠所有功能

javascript - 对外部变量设置 promise

javascript - 图像没有显示，即使我试图从 html 数据表中获取图像并将其显示到 div 中

javascript - React 和 Redux 中的事件监听器内存泄漏

javascript - 如何在 iOS6 上通过浏览器访问 IFA

javascript - 如何将 Kendo-grid 用于 Angular-ngRepeat

java - 如何使用 Jsoup 提取 HTML 的单独部分？

asp.net-mvc - 可以在 Angular 中动态加载模块吗？

©2024 IT工具网  联系我们