如何通过JavaScript函数创建Angular JS Material元素？
问题：我创建了一个带有带有按钮的md卡的网页。单击该按钮后，我希望显示另一张卡。问题是：我不知道如何使新卡的按钮工作。它的格式不正确，并且没有任何功能 问题：要使代码正常工作，我需要将代码更改为什么？谢谢 代码：这是我的JavaScript代码：如何通过JavaScript函数创建Angular JS Material元素？,javascript,angularjs,angularjs-material,md-card,Javascript,Angularjs,Angularjs Material,Md Card,问题：我创建了一个带有带有按钮的md卡的网页。单击该按钮后，我希望显示另一张卡。问题是：我不知道如何使新卡的按钮工作。它的格式不正确，并且没有任何功能 问题：要使代码正常工作，我需要将代码更改为什么？谢谢 代码：这是我的JavaScript代码： angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) .controller('AppCtrl', function($scope, $
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog) {
function addMeinElement () {
// create a new div element
var newDiv = document.createElement("md-card");
document.querySelector('#myID').appendChild(newDiv);
newDiv.innerHTML = "<md-card-content>Oh no! Why does this button not work?<br>"+
"<md-button class='md-warn' ng-click='my_print_to_console()'>Button :( </md-button>"+
"</md-card-content>";
}
$scope.my_print_to_console = function () {
addMeinElement ();
};
});
angular.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']））
.controller（'AppCtrl'，函数（$scope，$mdDialog）{
函数addMeineElement（）{
//创建一个新的div元素
var newDiv=document.createElement（“md卡”）；
document.querySelector（“#myID”）.appendChild（newDiv）；
newDiv.innerHTML=“哦，不！为什么此按钮不起作用？
”+
“按钮：（”+
"";
}
$scope.my_print_to_console=函数（）{
addMeineElement（）；
};
});
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.13/angular-material.css'>
<link rel='stylesheet' href='https://material.angularjs.org/1.1.13/docs.css'>
</head>
<body>
<div ng-controller="AppCtrl" ng-app="MyApp">
<div style="position:fixed; width:100%; top:0; height:100%;">
<div style="position:fixed;width:80%;top:0;left:50%;transform: translate(-50%, 0);">
<md-card>
<md-card-content>
<p>Click the button to hopefully create a new card with another button.</p>
<md-button class="md-warn" ng-click="my_print_to_console()";>Button :)</md-button>
</md-card-content>
</md-card>
<div id="myID">
</div>
</div>
</div>
</div>
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.13/angular-material.js'></script>
<script src="app.js"></script>
</body>
点击按钮，希望用另一个按钮创建一张新卡
按钮：）
发生这种情况是因为Angular没有意识到这是一个角度分量。你需要用服务包装你的HTML
这似乎是一个有希望的答案。但是，我无法确定在代码中的何处插入此修改。我尝试了以下方法，但对我无效
newDiv.innerHTML=$compile（“test”）（$scope）