ディレクティブ要素をプログラムで作成するにはどうすればよいですか？

角1.4.8ディレクティブ要素をプログラムで作成するにはどうすればよいですか？

コントローラー内でプログラムでディレクティブエレメントを作成するにはどうすればよいですか？私は$compileを試しましたが、それは私のためには機能しません。

コントローラとディレクティブ

angular.module('plunker', []) 
.controller('MainCtrl', function ($scope, $compile) { 
    var container = angular.element(document.getElementById('container')); 
    $scope.user = {item: 'Axe'}; 

    var item = angular.element(document.createElement('anItem')); 
    item = $compile(item)($scope); 

    container.append(item); 
}) 
.directive('anItem', function(){ 
    return { 
    templateUrl: 'template.html' 
    }; 
});

template.html

<p>Item: {{user.item}}</p>

index.htmlを

... 
<body ng-controller="MainCtrl"> 
    <div id="container"></div> 
</body> 
...

彼私のプランカです：http://plnkr.co/edit/XY6C6J70PjQTrjiwjHSz?p=preview

出典

2017-01-23 trex

あなたのhtmlでng-ifを使用することはできませんか？あなたのコントローラーにフラグを設定してレンダリングするかどうかを決めます。 –

それはちょうどケーシングの問題です： 'anItem'の代わりに' document.createElement（ 'an-item'） ' – lex82

@ lex82あなたは正しいです、ありがとう！あなたの答えを掲示し、私はそれを評価します。 – trex

ディレクティブの名前は "anItem"ですが、DOM要素の名前は "an-item"です。これは角のある命名規則です。これは動作します：

document.createElement('an-item')

ここでは、更新されたPlunkerです。

出典

2017-01-23 14:23:01 lex82

var elm = angular.element('<an-item"></an-item>'); 
container.append(elm); 

scope.$applyAsync(function() { 
    $compile(elm)(scope); 
});

出典

2017-01-23 14:29:52

ディレクティブ要素をプログラムで作成するにはどうすればよいですか？

答えて

関連する問題