AngularJSコントローラでアイテムを動的に作成

Question

以下のようなカスタムディレクティブを作成しました。

app.directive('myDirective', function() { 
    return { 
     template: '<h1>This is myDirective</h1>', 
     restrict: 'E', 
     replace: true, 
     link: function (scope, element, attrs) { 

     } 
    }; 
}); 

と私のHTMLコードは以下の通りです。

<ion-view view-title="Search"> 
    <ion-content> 
     <div id="myid"></div> 
    </ion-content> 
</ion-view> 

最後に、私のコントローラは次のようなものです。私はmy-directive要素を以下のようなコントローラ内に動的に作成したいと考えています。しかし、それは動作しません。あなたはこの問題を解決する方法を知っていますか？ ありがとうございます！

app.controller('Search', function ($scope) { 
    var content = document.getElementById("myid"); 
    content.setAttribute("class", "list"); 
    var mydir = document.createElement("my-directive"); 

    content.appendChild(mydir); 
}) 

Answer 1

ない。この背後にある理由が何であるかを確認します。

my template data coming from server dynamicly and using inside the controller is the best solution for me

まあ、それは推奨されませんが、はい、あなたはそれを行うことができます。なぜ動的

var app = angular.module("sa", []); 
 

 
app.controller("Search", function($scope, $compile) { 
 

 
    $scope.doTheBadThing = function() { 
 
    var $parent = angular.element(document.getElementById("myid")); 
 
    $parent.addClass("list"); 
 
    var mydir = document.createElement("my-directive"); 
 
    // or 
 
    //var mydir = "<my-directive></my-directive>"; 
 
    $parent.append(mydir); 
 

 
    // This is the main thing. You need to compile the dynamic HTML so that Angular can initialized on those template 
 
    $compile($parent.contents())($scope); 
 
    }; 
 
}); 
 

 
app.directive('myDirective', function() { 
 
    return { 
 
    template: '<h1>This is myDirective</h1>', 
 
    restrict: 'E', 
 
    replace: true, 
 
    link: function(scope, element, attrs) { 
 

 
    } 
 
    }; 
 
});

#myid { 
 
    background: #ccc; 
 
    min-height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="Search"> 
 
    <button ng-click="doTheBadThing()">Do the bad thing</button> 
 
    <div id="myid"></div> 
 
</div>

Answer 2

あなたは、コントローラからのDOMを操作するこの

app.controller('Search', function ($scope) { 
var content = document.getElementById("myid"); 
content.setAttribute("class", "list"); 
var mydir = <my-directive></my-directive>; 

content.appendChild(mydir); 
}) 

Answer 3

のようにコントローラに指令を呼び出すことができることは非常に悪い考えです。コントローラーとビューの間に緊密な結合が形成されるため、これを行うべきではありません。

あなたが達成しようとしていることが明確ではありません。 コントローラスコープ とコントローラ $ scope.path = 'templates/my_template_1.html'に設定されたテンプレートへのダイナミックパスを指定してng-includeを使用できます。