Question

我有一个登录页面，我输入凭据。将正确的凭据发送到服务器时，服务器将使用包含脚本的新元素的字符串进行响应。然后，服务器返回的元素集将替换登录页面的body内容。问题是当新内容加载到文档 angular 时，功能不起作用。

这是登录页面：

<!DOCTYPE html>
    <html>
        <head>
        </head>
        <body ng-app="loginApp">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
            <script type="text/javascript" src="js/login/loginMain.js">
            </script>
            Login<br><br>
            <form ng-controller="loginController" ng-submit="postForm()">
                User Name:<br>
                <input ng-model="unameInputField" type="text" name="user[name]"><br>
                Password:<br>
                <input ng-model="passwordInputField" type="password" name="user[password]">
                <input type="submit" name="Submit">
            </form>
        </body>
    </html>

这是loginMain.js：

/* public/js/controllers/apps *************************************/
angular.module("loginApp", []); 

angular.module("loginApp").controller("loginController", function($scope, $http){
    $scope.unameInputField = "";
    $scope.passwordInputField = "";
    $scope.postForm = function() {
        $http.post("/credentials.json", {username: $scope.unameInputField, password: $scope.passwordInputField},
         {headers: {'Content-Type': 'application/json'}}).then(
                function(res) { //Success
                    // window.location.href = 'http://localhost:3000/home';
                    console.log(res.data)
                    $("body").attr("ng-app", "myApp");
                    $("body").html(res.data);
                },
                function(res) { // Failed
                    alert("POST FAILED, Server is most probably offline")
                }
            )
    }
})

这是我想放在body元素中的html元素：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <title>Home Electricity Manager </title>    
    <h1 id="the-header">Wellcome to home electricity manager radoslav.k.marinov@gmail.com!</h1>
    <div id="button-1-div" ng-controller="myController" order="1" style="text-align: center; display: inline-block;" ng-init="spanText=S4555">
        <span id="button-1-span-1" ng-click="changeText()" style="white-space:pre;">{{spanText}}</span><br>
        <button id="butt-1" ng-style="myStyle" ng-click="toggleRelay()">{{ButtonStatus}}</button>
    </div><br>
    <div id="button-2-div" ng-controller="myController" style="text-align: center; display: inline-block;"> 
        <span id="button-2-span-2" ng-click="changeText()" style="white-space:pre;">{{spanText}}</span><br>
        <button id="butt-2" ng-style="myStyle" ng-click="toggleRelay()">{{ButtonStatus}}</button>
    </div><br>
    <div change-cred></div>

我在Chrome浏览器的开发人员视图中看到内容实际已被替换，但用户视图看起来似乎没有编译新内容。这是该页面的图片：

如果角度函数正常工作，用户页面将如下所示：

请原谅我糟糕的英语！我希望你能得到这个想法，确实是什么问题！

Answer 1

首先：请不要这样做。真。您正试图重新发明角度路由已经为您提供的东西。花点时间研究视图背后的概念以及angularjs默认路由方案或高级UI-Router模块。它会在以后为你节省很多痛苦。您要做的是基本上创建一个“登录”状态，当用户尚未登录时，您的应用程序会被重定向到...并且有很多样本可以通过angularjs路由进行操作。

至于你原来的问题......我认为这是预期的结果。我怀疑，因为当你的第二个angularjs应用程序（我假设在main.js中定义）被初始化时，你动态地向主体添加HTML元素，它无法识别当前页面内容。这意味着即使应用程序设法启动初始编译阶段也无法按预期工作，最终会在未绑定到当前范围的html页面中结束。

如果我真的需要与此解决方案类似的东西，我会做两件事：

以对main.js文件的一些alert（）或console.log（）调用的形式添加一些反馈，以便我可以确定它已被执行。
尝试强制手动编辑“视图”。 Angularjs编译提供程序提供了一个$compile方法，可以用于此目的...但是让它在你的特定情况下工作我担心这将是一个非常大胆的任务（我唯一一次使用$ compile是在里面一个自定义指令，用于处理由JQuery插件执行的动态DOM更改。

我希望这会有所启发。无论如何，以牺牲冗余为代价......我再次建议不遵循这种方法，而是使用UI-Router。

重新编译文档中新加载的body元素 - Anglular

1 个答案: