Question

我正在尝试创建一个自定义指令，我想在元素的链接函数中附加模板。如果没有角度表达式/属性，内容就会很好。但是当我添加角度表达式/属性时，UI会像[[object HTMLDivElement]，[object HTMLButtonElement]]一样呈现为浏览器上的对象。请让我知道如何编译自定义指令

中添加的动态数据

HTML：

{{message}}
<user-address></user-address>

JS：

var module = angular.module('myApp', []);
module.controller('myController', function ($scope) {
$scope.User = 'Manju';
$scope.fnAddNewAddress = function () {
    $scope.message = 'New address added';
}
});

module.directive('userAddress', function ($compile) {
var directive = {};
directive.link = function (scope, element) {
    var template = '<div>Please find below the address of the user {{user}}</div><button ng-click="fnAddNewAddress()">Add address</button>';
    var lnkFn = $compile(template);
    var content = lnkFn(scope);
    element.html(content);
}
return directive;
});

Answer 1

我明白了，我在这里失踪了。我应该在链接函数

中使用element.append而不是element.html

AngularJS自定义指令，在元素的链接函数中包含动态数据

1 个答案: