2017-01-15 21 views
0

カスタムディレクティブを作成しようとしています。ここで、要素のリンク関数内にテンプレートを追加したいとします。角度表現/属性がない場合、内容はうまくいきます。しかし、私は角度の表現/属性を追加すると、[[オブジェクトHTMLDivElement]、[オブジェクトHTMLButtonElement]]のように、UIがブラウザ上のオブジェクトとしてレンダリングされています。要素上のリンク関数の動的データを持つAngularJSカスタムディレクティブ

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

JS:私は

HTMLカスタムディレクティブで追加された動的データをコンパイルする方法を教えてください

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

答えて

1

を、私は私がここに欠けているものを、それを得ました。私はリンク関数でelement.htmlの代わりにelement.appendを使用する必要があります

関連する問題