2016-08-18 30 views
0

正如標題中所述,我在Angular掃描儀/結帳應用程序。當從/ pull /:pull_id導航到/使用「返回」鏈接進行導航時,AngularJS Web應用程序給出「TypeError:domNode爲null」

當我直接加載/ pulls頁面時很好,沒有控制檯錯誤。然後,我可以選擇一個拉,然後單擊「視圖」來加載/ pull /:pull_id頁面。再次,這裏都很好。但是當我點擊一個鏈接到「返回」到/ pulls列表時,問題就出現了。

見下面的代碼樣本,樣品下方的控制檯日誌(包括我可愛的調試評論)..

我有一個在我的services.js文件名爲「pullsSvc」工廠..

app.factory("pullsSvc", ["$http","$q","$window","$routeParams", function ($http, $q, $window, $routeParams) { 

var pulls; 
var pull; 
console.log('pullSvc Factory started'); 
function get_pulls() { 
    console.log('pullSvc Factory get_pulls() started'); 
    var deferred = $q.defer(); 
    console.log('pullSvc Factory get_pulls() deferred'); 
    $http({ 
     method: 'post', 
     url: 'ajax.php', 
     data: $.param({ 
      'event' : 'get_pulls' 
     }), 
     headers: {'Content-Type' : 'application/x-www-form-urlencoded'} 
    }). 
    success(function(data) { 
     if(data.success == true){ 
      console.log('pullSvc Factory get_pulls() success'); 
      pulls = data.pulls; 
      deferred.resolve(pulls); 
     }else{ 
      console.log('pullSvc Factory get_pulls() error 1'); 
      deferred.reject('Could not get pulls.'); 
     } 
    }). 
    error(function(data) { 
     console.log('pullSvc Factory get_pulls() error 2'); 
     deferred.reject(error); 
    }); 

    return deferred.promise; 
} 

function get_pull(pull_id) { 
    ..... 
} 
return { 
    get_pulls: get_pulls, 
    get_pull: get_pull, 
}; 
}]); 

然後在我的controllers.js我有

app.controller("ViewPullsCtrl", ["$rootScope", "$scope", "$http", "$q", "$route", "$routeParams", "$location", "$window", "$timeout", "$sessionStorage", "authenticationSvc", "auth", "pullsSvc", "pulls", 
function ($rootScope, $scope, $http, $q, $route, $routeParams, $location, $window, $timeout, $sessionStorage, authenticationSvc, auth, pullsSvc, pulls) { 
    console.log('This 1'); 
    $scope.userInfo = auth; 
    $scope.pulls = pulls; 
    console.log('This 2'); 
    // FUNCTIONS 
     $scope.logout = function() { 
      authenticationSvc.logout() 
       .then(function (result) { 
        $sessionStorage.$reset(); 
        $location.path("/login"); 
       }, function (error) { 
        if(debug) if(debug) console.log(error); 
       }); 
     }; 
     $scope.alert = function(message){ 
      if(message){ 
       console.log(message); 
      } 
     } 
     $scope.consolelog = function(value){ 
      console.log(value); 
     } 
     $scope.setSelected = function(idSelected) { 
      $scope.idSelected = idSelected; 
     } 
} 
]); 

在我app.js路由(ngRoute)的相關位是

}).when("/pulls", { 
    templateUrl: "views/pulls.html", 
    controller: "ViewPullsCtrl", 
    activetab: "pulls", 
    url: "/pulls", 
    resolve: { 
     auth: function ($q, authenticationSvc) { 
      var userInfo = authenticationSvc.getUserInfo(); 
      if (userInfo) { 
       console.log('authSvc success'); 
       return $q.when(userInfo); 
      } else { 
       console.log('authSvc failure'); 
       return $q.reject({ authenticated: false }); 
      } 
     }, 
     pulls: function ($q, pullsSvc) { 
      var pulls = pullsSvc.get_pulls(); 
      if(pulls) { 
       if(debug) console.log('pullsSvc success'); 
       return $q.when(pulls); 
      } else { 
       if(debug) console.log('pullsSvc failure'); 
       return $q.reject({ pulls: false }); 
      } 
     } 
    } 

控制檯登錄

Route Change Start: 
app.js (line 179) 
Route Change Success: 
app.js (line 187) 
Object { name="$routeChangeSuccess", targetScope=Scope, defaultPrevented=false, more...} 
app.js (line 188) 
Route Change Start: 
app.js (line 179) 
authSvc success 
app.js (line 71) 
pullSvc Factory get_pulls() started 
services.js (line 189) 
pullSvc Factory get_pulls() deferred 
services.js (line 193) 
pullsSvc success 
app.js (line 81) 
POST http://portal_dev.mycompany.com:8888/custom_scripts/mobile_scanner/ajax.php 

200 OK 
     1.24s 
angular.js (line 12011) 
TypeError: domNode is null 


return domNode.offsetWidth + 1; 


angular.js (line 10490, col 7) 
pullSvc Factory get_pulls() success 
services.js (line 205) 
Route Change Success: 
app.js (line 187) 
Object { name="$routeChangeSuccess", targetScope=Scope, defaultPrevented=false, more...} 
app.js (line 188) 
This 1 
controllers.js (line 142) 
This 2 

更新: 改變<a href...><a ng-href...>沒有有所作爲。 angular.js的

線12011是xhr.send(isUndefined(post) ? null : post);(v1.5.6)

Chrome的錯誤日誌稍微有幫助.. angular.js:10490 Uncaught TypeError: Cannot read property 'offsetWidth' of null

回答

0

原來,這是從ngAnimate,其中包括在某種程度上所產生的問題我的應用程序依賴關係,但我沒有利用(打算,但扭轉了變化,並從未從應用程序依賴關係中刪除)。

我仍然不知道如何或爲何導致問題。但是通過從依賴中移除它來解決它。

其他研究表明,在加載之前嘗試訪問部分DOM時會發生錯誤。我不知道它是什麼動畫,因爲我沒有在我的控制器中做任何事情......但任何東西都很聰明。

我選擇了離開問題併發布我的「解決方案」,因爲這個錯誤與google maps api無關的主題是不存在的。

如果你可以回答爲什麼它正在發生或如何解決它而不刪除ngAnimate,我希望得到一些澄清,並將任何深度答案標記爲決議。