AngularJSでテンプレートを動的に追加する方法

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<body ng-app="app" ng-controller="appCtrl">
    <button type="button" id="addBtn">追加</button>
    <div id="hoge"></div>
</body>

JavaScript

var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope, $compile) {
    $('#addBtn').click(function () {
        $compile("<wj-input-date></wj-input-date>")($scope).insertAfter("#hoge");
    });
});