Как добавить dom без директивы

Question

Как добавить dom с Angularjs без использования директивы. Положите это на мое слово, что я не могу использовать директиву в этой ситуации. Сейчас я добавляю dom, используя jQuery, но я не могу найти способ перекомпилировать его, чтобы Angularjs знал, как с этим бороться. Я бы предпочел добавить dom, используя Angularjs, потому что я думаю, что было бы проще скомпилировать его таким образом, но я действительно не знаю. После добавления dom, как я могу скомпилировать его без контроллеров. Все, что у меня есть, это зарегистрированный модуль приложения.

Пример того, что я пытаюсь сделать в этом jsFiddle:

http://jsfiddle.net/p437P/

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

var testCtrl = function($scope) { 
    $scope.bool = {}; 
    $scope.bool.state = false; 
}; 

app.controller('testCtrl',['$scope',testCtrl]); 

setTimeout(function() { 
    jQuery('body').append('<div ng-controller="testCtrl"><p ng-show="bool.state">Hi</p></div>') 
},500); 

Answer 1

Это может быть сделано с angularjs просто хорошо. С некоторой помощью с ng-include и ленивой загрузкой.

Например я есть контроллер (ModulesCtrl), который загружает в модули (другие контроллеры)

ModulesCtrl

app.controller('ModulesCtrl',['$rootScope','$scope',function ModulesCtrl($rootScope,$scope) { 
    $scope.modules = []; 
    $scope.data = { 
     modules:[] 
    }; 

    //Called after lazy loading the controllers js file 
    //otherwise you will get undefined function errors etc 
    function addModule(){ 
     $scope.data.modules.push({ 
     template:'/templates/modules/test.template', 
     settings:{name:"Test"} 
     }); 
    } 
}]); 

ModulesCtrl Элемент

<div ng-controller="ModulesCtrl" ng-position="top"> 
    <div ng-repeat="module in data.modules" ng-include src="module.template"></div> 
</div> 

test.template

<div ng-controller="TestCtrl"> 
    this is a test template 
</div> 

Теперь при добавлении их в как это требует, чтобы сделать отложенную загрузку так:

Отрывки из: http://ify.io/lazy-loading-in-angularjs/

(function() 
{ 
    var app = angular.module('app', []); 

    app.config(function($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) 
    { 
     app.controllerProvider = $controllerProvider; 
     app.compileProvider = $compileProvider; 
     app.routeProvider  = $routeProvider; 
     app.filterProvider  = $filterProvider; 
     app.provide   = $provide; 

     // Register routes with the $routeProvider 
    }); 
})(); 

Ленивый загруженный контроллер должен выглядеть следующим образом:

angular.module('app').controllerProvider.register('SomeLazyController', ['$scope'],function($scope) 
{ 
    $scope.key = '...'; 
}); 

Answer 2

Вы никогда не должны, когда-либо делать Dóm манипуляции за пределами директивы, и вы никогда не должны. Однако, так как вы убедили себя иначе:

//inject the $compile service into the controller 
app.controller('myCtrl', function($scope, $compile) { 
    //create the markup 
    var $x = $('<p>{{foo}}</p>'); 
    $('body').append($x); 
    //$compile it with the scope 
    $compile($x)($scope); 
}); 

Live demo (click).

На основе вашего обновления:

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

var testCtrl = function($scope) { 
    $scope.foo = 'See, I loaded!'; 
}; 

app.controller('testCtrl',['$scope',testCtrl]); 

app.directive('myDirective', function() { 
    return { 
     template: '<div ng-controller="testCtrl">{{foo}}</div>' 
    }; 
}); 

Live demo (click).