Question

问题：

在jquery ajax响应函数中，使用angular.element（selector）.scope（）有时无法获取其实际范围。至少对于Chrome浏览器。

如何重复：

将以下页面放入Web服务器。使用chrome访问它，按F12打开开发控制台，重复单击登录/注销。打印的id值应为＆＃34; 2＆＃34;，但有时它是＆＃34; 1＆＃34;。在我的环境中，＆＃34; 1＆＃34;显示不到10次。

我的环境： chrome 57.0.2987.133（64位），Linux foxsen-pc 4.2.0-1-amd64＃1 SMP Debian 4.2.6-3（2015-12-06）x86_64 GNU / Linux。 tomcat 8.5.13

分析

我试图找出根本原因并找到这些事实：

如果我在jquery之前加载角度，似乎没问题
如果我注释掉$（＆＃34;＃sidebarControl＆＃34;）。show，似乎没问题
当我在脚本上设置断点时，id == 1从未见过
id == 1在同一台计算机的Firefox 52.0.2（64位）中看不到
使用console.log来打印$ scope fetched，我发现在范围的情况下jqueryxxxx对象不在body dom对象中。$ id ==＆＃34; 1＆＃34;。但是我试图在控制器中添加代码以在控制器功能中执行相同的打印，jqueryxxx存在并且范围。$ id是＆＃34; 2＆＃34;。因此，在某些情况下，似乎绑定的jquery对象（以及存储在其中的范围对象）可能会丢失。

我知道混合使用jquery和angular是不好的。我可以通过使用$ http而不是$ .ajax来解决问题，或者只使用$ scope而不是从DOM中获取它。但我想知道它为什么会失败以及我所缺少的东西。

任何指针都将受到赞赏。

代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body ng-controller="sidebarControl" id="sidebarControl">
<div id="loginView">
     <form>
        <input type="button" style="width: 100%" value="login" ng-click="login()"/>
     </form>
</div>
<div id="indexView" style="display:none">
    <h2> This is a test! </h2>
    <input type="button" syle="width: 100%" ng-click="loginOut()" value="logout"/>
</div>

<script type="text/javascript" src="../javascript/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../javascript/angular.js"></script>
<script type="text/javascript">

    var app = angular.module('myApp', []);
    app.controller('sidebarControl', function ($scope) {

        $("#sidebarControl").show(); //without this line it seems ok

        var userData = getCookie("userData");
        if(typeof(userData) != 'undefined' && userData == "logged"){
                $("#loginView").hide();
                $("#indexView").show();
                console.log(userData);
        }

        $scope.login = function () {
            $.ajax({
                type: "get",
                url: "/huiyi", //any existing page
                success: function (m) {
                    setCookie("userData","logged");
                    $("#loginView").hide();
                    $("#indexView").show();

                    var ele = angular.element("#sidebarControl");
                    console.log(ele.scope().$id)
                    if (ele.scope().$id == "1"){
                        alert("scope is wrong!");
                        console.log(ele.scope())
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            })
        }

        $scope.loginOut = function () {
            delCookie("userData");
            window.location.href="test.html";
       }

       function getCookie(c_name) {
           if (document.cookie.length > 0) {
               c_start = document.cookie.indexOf(c_name + "=")
               if (c_start != -1) {
                   c_start = c_start + c_name.length + 1
                   c_end = document.cookie.indexOf(";", c_start)
                   if (c_end == -1) c_end = document.cookie.length
                   return unescape(document.cookie.substring(c_start, c_end))
               }
           }
           return ""
       }
       function setCookie(name,value)
       {
           var Days = 180;
           var exp = new Date();
           exp.setTime(exp.getTime() + Days*24*60*60*1000);
           document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
       }
       function delCookie(name)
       {
           var exp = new Date();
           exp.setTime(exp.getTime() - 1);
           var cval=getCookie(name);
           if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
       }
    }) 
</script>
</body>
</html>

元素有时会失去其范围绑定

0 个答案: