Angular JS：单击按钮后如何在特定元素中加载 Angular js 部分视图页面
Posted
技术标签:
【中文标题】Angular JS：单击按钮后如何在特定元素中加载 Angular js 部分视图页面【英文标题】：Angular JS: How to load angular js partial view page in specific element after button click 【发布时间】：2022-01-22 04:23:25 【问题描述】：单击按钮后未加载 Angular js 部分视图页面。一旦我们单击按钮，我已经加载了初始渲染页面。部分视图页面将呈现，此时角度模块不会被触发并且不会返回正确的文本。我怎样才能实现这种场景？
Layout.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>
app.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"
]);
HomeController.cs
public PartialViewResult About()
ViewBag.Message = "Your application description page.";
return PartialView(@"~/Views/Home/About.cshtml");
部分查看页面： 关于.cshtml
<div ng-controller="MyController">
<center ng-init="firstFunction(this)">
<h1 style="color: green;">text</h1>
</center>
</div>
注意：点击按钮时，GeeksForGeeks需要显示， 这里 text 附加在 UI 元素中
【问题讨论】：
【参考方案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 部分视图页面的主要内容，如果未能解决你的问题，请参考以下文章