Question

我有一个ng-click函数，可以成功地将新<tr>附加到已点击的function expandTransactionDetail($event) { var row = angular.element($event.currentTarget); row.after('<tr><td>Holla!</td></tr>'); }

$compile

这个HTML目前只是一个测试。 HTML将变得更加复杂。我想从模板文件中派生HTML。我是否需要使用AngularJS中的ngInclude功能？ 1412 Chestnut Street Philadelphia 494 W Germantown Pike Plymouth Meeting？

Answer 1

您真正想要的是创建一个directive，您可以在其中拥有自己的模板，范围以及更多有趣的内容：

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            data: '=myData'
        },
        link: function(scope, elem, attrs) {
            elem.on('click', function() {
                elem.append(scope.data);
            });
        }
    };
});

myApp.controller('MyCtrl', function($scope) {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <my-directive my-data="'Well done!'">Click me to append String!</my-directive>
</div>

Answer 2

Don Juwe建议我为HTML创建自己的指令

function expandTransactionDetail($event) {
    var row = angular.element($event.currentTarget);
    var detailRow = $compile('<div secr-transactions-listing-detail>')(scope);
    row.after(detailRow);
}

在使用html模板单击元素后附加新元素

2 个答案: