Question

嗨，我正在进入控制台：

angular.js：10072ReferenceError：$ document未定义      在链接（http://localhost:9999/CheckBoxOperation/:173:15）

在N
<table class="table table-bordered" arrow-selector="">

实际上我正在尝试像http://code.ciphertrick.com/2015/03/15/change-row-selection-using-arrows-in-ng-repeat/

那样进行箭头选择

由于我的代码中的虚线内部的代码，我收到了该错误。我认为这与剧本有关，但我没有。

这是我的代码： AngularJS复选框

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">     
    <script type="text/javascript">

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

    app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http)
     {
                    $scope.headerText = ' Form';
                    $scope.selectedColor;
                    $scope.Levels=[];       //for checkbox name
                    $scope.Rows=[];         //for rows
                    $scope.selection=[]; 
                    $scope.selectedRow=0;

                    $http({method: 'GET', url: 'controller/getLevelCheckBox'}).
                              success(function(data, status, headers, config)
                             {
                                         angular.forEach(data, function(value, key)
                                         {
                                                  $scope.Levels.push(value);      
                                          });
                              })


                        // toggle selection for a given level by name
                        $scope.toggleSelection = function toggleSelection(levelName) {

                        var idx = $scope.selection.indexOf(levelName);

                        // is currently selected
                        if (idx > -1) {
                          $scope.selection.splice(idx, 1);
                        }

                        // is newly selected
                        else {
                          $scope.selection.push(levelName);
                          $scope.getAllJobs = function()
                          {

                                var response = $http.get('controller/getDataTable/'+levelName);
                                response.success(function(data, status, headers, config)
                                {
                                       angular.forEach(data, function(value, key)
                                         {
                                                  $scope.Rows.push(value);  //json Array valuessss
                                         });

                                       $scope.setClickedRow = function(index){
                                        //   window.alert("row clicked "+index);
                                           $scope.selectedRow = index;
                                       }

                                          $scope.$watch('selectedRow', function() {
                                                console.log('Do Some processing'); //runs the block whenever selectedRow is changed. 
                                            });
                                    window.alert("sccusee");
                                });

                                response.error(function(data, status, headers, config) 
                                {
                                    alert("staus ::"+status);
                                });

                          }//getAllJobs()
                         }//else
                      };//toggle function

    }]);//controller

    app.directive('arrowSelector',function(){
            return{
                restrict:'A',
                link:function(scope,elem,attrs,ctrl){

                    var elemFocus = false;   

                    elem.on('mouseenter',function(){
                        elemFocus = true;
                           console.log(true);


                    });
                    elem.on('mouseleave',function(){
                        elemFocus = false;
                           console.log(false);



                    });
    //--------------------------------------------------------------                
                    $document.bind('keydown',function(e){
                           console.log("bind");


                        if(elemFocus){
                            if(e.keyCode == 38){
                               console.log(" 38 kjeeeey ::"+scope.selectedRow);
                                if(scope.selectedRow == 0){
                                    return;
                                }
                                scope.selectedRow--;
                                scope.$apply();
                                e.preventDefault();
                            }
                            if(e.keyCode == 40){
                                if(scope.selectedRow == scope.Rows.length - 1){     return;
                                }
                                scope.selectedRow++;
                                scope.$apply();
                                e.preventDefault();
                            } 
                        }
                    });  //till this point
                }
            }; 
    });   

 </script>

 </head>
 <body data-ng-controller="FormSubmitController">
        <h3>{{headerText}}</h3>
        <div class=panel>
    <div class="check-box-panel">
        <div data-ng-repeat="level in Levels">
            <div class="action-checkbox">
                <input id="{{level}}" type="checkbox" value="{{level}}" data-ng-checked="selection.indexOf(level) > -1"
         data-ng-click="toggleSelection(level)" />
                <label for="{{level}}"></label>
                {{level}}
            </div>
        </div>
            <input type="submit" value="show all jobs " data-ng-click="get All Jobs()"/>

    </div>

    <div class="selected-items-panel">

    <table class="table table-bordered" arrow-selector>
     <thead>
        <tr data-ng-repeat="(key,value) in Rows" data-ng-if="$last">
          <td data-ng-repeat="(key,v) in value"><input type="button" value={{key}}></td>
       </tr>
       <tbody>
            <tr   data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)"
     data-ng-repeat="(key,value) in Rows">
               <td data-ng-repeat="(key,v) in value">{{v}}</td>
         </tr>
         </tbody>
         </table> 
         <div>
               selectedRow = {{selectedRow}}
         </div>
            <div>
            item = {{Rows[selectedRow]}}
        </div>
         </div>
 </div>
 </body>
</html>

Answer 1

您可以使用angular.element（document）来获取等效的jquery

angular.js ReferenceError：$ document未定义

1 个答案: