将AngularJS材料设计样式应用于动态创建元素

Question

我有一个AngularJS应用程序，其中我需要动态添加AngularJS材料组件。我使用Jquery来实现这一点，使用一个按钮单击。

组件正在添加到布局中，但样式不适用于布局。

但是，还有其他组件被加载到页面上，看起来完全没有问题。

有人能帮我解决这个问题吗？谢谢。

这是我的jquery代码。

$(document).ready(function(){
    var counter = $('#contactNum').val();
    $('#addEmergencyContact').click(function() {
        counter++;
        $('#contactNum').text(counter);
    $(this).before('<div class="card-body pt-0">
<div class="row">
    <div class="col-md-12">
        <md-input-container class="md-block mx-4 mt-4" flex-gt-sm>
            <label>First name</label>
            <input type="text" name="firstname" id="firstname" ng-model="emergency_firstname" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Surname</label>
            <input type="text" name="lastname" id="lastname" ng-model="emergency_lastname" autocomplete="off" >
        </md-input-container><md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Email</label>
            <input type="text" name="email" id="email" ng-model="emergency_email" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Phone Number</label>
            <input type="text" name="phone" id="phone" ng-model="emergency_phone" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" md-theme="altTheme1"  flex-gt-sm>
            <label>Relationship to you</label>
            <md-select ng-model="relation" placeholder="Relationship" ng-selected="get_Selected_relation()" >
                <md-option value="Spouse">Spouse</md-option>
                <md-option value="Partner">Partner</md-option>
                <md-option value="Parent">Parent</md-option>
                <md-option value="Friend">Friend</md-option>
            </md-select>
        </md-input-container>
    </div>
</div>
    <button id="removeEmergencyContact">Remove Contact</button> 
  </div>');
  });

    $(document).on('click','#removeEmergencyContact',function() {
        counter--;
        $('#contactNum').text(counter);
    $(this).parent('div').remove();
    });  
});

这是我的AngularJS代码

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

});

到目前为止，我还没有编写任何将值设置为AngularJS组件的内容。所以是空白的。

这是图像

​

​

图像的上半部分在加载时呈现，当单击“添加”按钮时，图像的下半部分被加载。

Answer 1

我在寻找过去几周的解决方案。最后，@Rayon的解决方案帮助我解决了这个问题。

任何面临同样问题并寻求解决方案的人都可以跟随这篇文章。

add form fields dynamically on user click using angular js.

希望能帮上忙。谢谢。