Как получить динамический контент с тегом script, работающим в AngularJS?

Question

Я пытаюсь интегрировать AngularJS в существующее веб-приложение. Некоторые данные в приложении загружаются динамически через $.ajax() а также element.html(data), data может содержать HTML-код с кодом JavaScript в теге <script>, Этот код успешно загружен браузером, но angular не видит его при попытке вызова $compile(), Как я могу это исправить?

JSFiddle

<div ng-app="app">
    <div id='container'>

    </div>
</div>

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

$(document).ready(function() {
    var container = $('#container');
    var html = '';
    html += '<scripttag type="text/javascript">';
    html += 'app.controller("TestController", function($scope) {$scope.testVar = "testVal"});';
    html += 'console.log("Controller added");';
    html += '</scripttag>';
    html += '<b ng-controller="TestController">{{testVar}}</b>';
    container.html(html.replace(/scripttag/g, 'script'));

    angular.element(container).injector().invoke([ '$compile', function($compile) {
            var $scope = angular.element(container).scope();
            console.log("Compiling new element...");
            $compile(container)($scope);
            $scope.$apply();
    } ]);
});

Консольный журнал:

Controller added
Compiling new element...
Uncaught Error: [ng:areq] Argument 'TestController' is not a function, got undefined http://errors.angularjs.org/1.2.30/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined

PS html.replace(/scripttag/g, 'script') - это обходной путь, из-за прямого вызова html('<script></script>') не работает в jsffidle.com.

Answer 1

Хорошо, проблема в том, что после загрузки приложения AngularJS вы не можете определить новые контроллеры. Описание и решение.

Я исправил мой пример здесь.

    app.config(
        function( $controllerProvider, $provide, $compileProvider ) {
            app._controller = app.controller;
            app._service = app.service;
            app._factory = app.factory;
            app._value = app.value;
            app._directive = app.directive;
            app.controller = function( name, constructor ) {
                $controllerProvider.register( name, constructor );
                return( this );
            };
            app.service = function( name, constructor ) {
                $provide.service( name, constructor );
                return( this );
            };
            app.factory = function( name, factory ) {
                $provide.factory( name, factory );
                return( this );
            };
            app.value = function( name, value ) {
                $provide.value( name, value );
                return( this );
            };
            app.directive = function( name, factory ) {
                $compileProvider.directive( name, factory );
                return( this );
            };
        }
    );