Как создать угловой элемент материала JS с помощью функции JavaScript? - PullRequest
Новая
       34

Как создать угловой элемент материала JS с помощью функции JavaScript?

0 голосов
/ 18 марта 2019

Проблема: Я создал веб-страницу с md-картой, на которой есть кнопка. После нажатия этой кнопки я хочу, чтобы появилась другая карта. Проблема: не могу понять, как заставить работать кнопка новой карты. Он неправильно отформатирован и не имеет никакой функциональности.

Вопрос: На что мне нужно изменить код, чтобы он работал? Спасибо.

Код: Это мой JavaScript-код: 

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 ();
                                                };  


});

Это соответствующий HTML: 

<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>

1 Ответ

1 голос
/ 18 марта 2019

Это происходит потому, что Angular не знает, что это угловой компонент. вам нужно обернуть ваш HTML сервисом $ compile .

  1. Добавьте '$ compile' к зависимости вашего модуля
  2. Оберните код таким образом

$ compile ('ваш html здесь') ($ scope);

...