如何在angularjs中将指令动态附加到div

Question

var myApp = angular.module('myApp', []);

myApp.controller('someController', function($scope) {
    $scope.click = function(){
        alert("asd");
    };

});
myApp.directive('testInput',function(){
     return {
          restrict: 'E',
          replace: false,
          transclude: false,
          template: '<div>asdasdasdasd</div>',
          controller: function($scope) {

         }
      };
}); 

HTML:

<div ng-app = "myApp" ng-controller = "someController">

    <div class = "clickme" ng-click ="click()">
        click me
    </div>

    <div id="container">
    </div>

</div>

Without using Jquery is there any good Angular way to append directive(testInput) to #container ? see below jsfiddle link http://jsfiddle.net/4L6qbpoy/1/

Answer 1

More Angular approach is to use ngIf/ngShow with some flag in controller:

 var myApp = angular.module('myApp', []); myApp.controller('someController', function($scope) { $scope.click = function() { $scope.test = true; }; }); myApp.directive('testInput', function() { return { restrict: 'E', replace: false, transclude: false, template: '<div>asdasdasdasd</div>', controller: function($scope) {} }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="someController"> <div class="clickme" ng-click="click()">click me</div> <div id="container"> <test-input ng-if="test"></test-input> </div> </div>