Angular JS：如何在按鈕單擊后在特定元素中加載 angular js 部分視圖頁面

Question

Angular js 部分視圖頁面在按鈕單擊后未加載。 一旦我們單擊按鈕，我已經加載了初始渲染頁面。 部分視圖頁面將呈現，此時 angular 模塊不會被觸發並且不會返回正確的文本。 我怎樣才能實現這種類型的場景？

布局.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <script src="~/Scripts/app.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div id="content"><button onclick="clicked()">Click Here</button></div>        
    </div>
    @RenderBody()
    <script>
        function clicked() {
            $.ajax({
                type: "GET",
                url: "/Home/About",
                data: null,
                dataType: "html",
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $('#content').append(data);
                },
                error: function (ex) {
                    console.log(ex);
                }
            });
        }
    </script>
</body>
</html>

應用程序.js

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

    // Function to be called on page load
    $scope.firstFunction = function ($scope) {
        $scope.text = "GeeksForGeeks"
    }
}]);

家庭控制器.cs

public PartialViewResult About()
        {
            ViewBag.Message = "Your application description page.";

            return PartialView(@"~/Views/Home/About.cshtml");
        }

部分視圖頁面： About.cshtml

<div ng-controller="MyController">
    <center ng-init="firstFunction(this)">
        <h1 style="color: green;">{{text}}</h1>
    </center>
</div>

注意：點擊按鈕時， GeeksForGeeks需要顯示，這里{{text}}附加在 UI 元素中

Answer 1

嘗試從您那里刪除錯誤的數據和內容類型 ajax

  $.ajax({
                type: "GET",
                url: "/Home/About",
                success: function (data) {
                $('#content').append(data); //or try $('#content').html(data);
                },
                error: function (ex) {
                    console.log(ex);
                }
            });

Angular JS：如何在按鈕單擊后在特定元素中加載 angular js 部分視圖頁面

問題描述

1 個解決方案

解決方案1
0 2021-12-20 15:49:07

Angular JS：如何在按鈕單擊后在特定元素中加載 angular js 部分視圖頁面

問題描述

1 個解決方案

解決方案1 0 2021-12-20 15:49:07

解決方案1
0 2021-12-20 15:49:07