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를 사용할 수 있습니다.