AngularJS web app gives "TypeError: domNode is null" when navigating from /pull/:pull_id to /pulls using a "Go Back" link

Question

如标题中所述，我在 Angular scanner/checkout 应用程序中遇到了一个描述不太清楚的错误。

当我直接加载 /pulls 页面时没有问题，没有控制台错误。然后，我可以 select 拉动并单击 "view" 以加载 /pull/:pull_id 页面。同样，一切都很好。但是，当我单击 link 到 "Go Back" 到 /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

Answer 1

事实证明，这是一个以某种方式源于 ngAnimate 的问题，它包含在我的应用程序依赖项中，但我没有使用（打算使用，但撤消了更改，并且从未从应用程序依赖项中删除）。

我仍然不知道它是如何或为什么导致这个问题的。但它通过从依赖项中删除它来解决。

其他研究表明，在 DOM 加载之前尝试访问部分内容时会发生错误。我不知道它试图制作什么动画，因为我没有在我的控制器中对它做任何事情..但不管怎样聪明。

我选择留下问题和 post 我的 "resolution" 因为关于此错误的主题与 google 地图 api 无关存在。

如果您能回答为什么会发生这种情况或如何在不删除 ngAnimate 的情况下解决它，我很乐意得到一些说明并将任何深入的答案标记为解决方案。

AngularJS web app gives "TypeError: domNode is null" when navigating from /pull/:pull_id to /pulls using a "Go Back" link

AngularJS web app gives "TypeError: domNode is null" when navigating from /pull/:pull_id to /pulls using a "Go Back" link

javascript

ajax

typeerror

factories

angularjs