Question

我试图向HTML文件发出请求，该文件应该包含所需的所有控制器以及与这些控制器关联的模板，然后将它们加载到webapp的特定部分。

我无法对控制器进行角度加载.. js工作..模板被渲染..这就是我的工作方式..

所以外部文件看起来像这样

<script type='text/javascript'>
alert('Hi'); // this alert works..
angular.module('testApp.externalControllers').controller('myCtrl', function($scope) {
    alert('Controller loaded'); // this alert doesn't
    $scope.textTest = 'Testing external controller text';
});
</script>

<div ng-controller='myCtrl' id='mainc'>
    {{textTest}}
</div>

app.js

angular.module('testApp', [
    'testApp.controllers',
    'testApp.externalControllers',
    'testApp.directives',
    'testApp.services',
    'ngSanitize'
]);
angular.module('testApp.controllers', []);
angular.module('testApp.externalControllers', []);
angular.module('testApp.directives', []);
angular.module('testApp.services', []);

// ====================================================
// CONTROLLERS
// ====================================================

angular.module('testApp.controllers').controller('MainCtrl', [
'$scope',
    '$rootElement',
    'TestService',
    '$timeout',
    '$sce',
    '$compile',
    function($scope, $rootElement, TestService, $timeout, $sce, $compile) {
        getExternalMiniApp(); // this starts the action

        function getExternalMiniApp() {
            TestService.getExternalMiniApp().then(function(success) {
                console.log('success getExternalMiniApp');
                console.log(success);
                var xmlString = success.data,
                    parser = new DOMParser(),
                    doc = parser.parseFromString(xmlString, "text/html");

                // getting the <script> part
                var script = doc.getElementsByTagName("script")[0].innerHTML;

                // getting template that's inside div with id = mainc
                var template = doc.getElementById('mainc');

                console.log(script);
                console.log(template);
                var scriptTag = document.createElement('script');
                var scriptTextNoFormat = script;
                var scriptText = document.createTextNode(scriptTextNoFormat);
                scriptTag.appendChild(scriptText);

                // append the <script> to the head, works..
                document.head.appendChild(scriptTag);

                // this is a div with id=foo where it should load the HTML 
                var whereTheExternalHTMLGoes = document.getElementById('foo');

                // set a timeout, I thought digest should take some time..
                $timeout(function() {
                    whereTheExternalHTMLGoes.appendChild($compile(template)($scope));
                }, 500);    

            }, function(error) {
                console.log('error getExternalMiniApp');
                console.log(error);
            });
        }
    }
]);

的index.html

<body ng-app="testApp">
    <div ng-controller="MainCtrl">
        Test
        <div id="foo">
        </div>
    </div>
</body>

TestService 仅返回带有template.html的{{1}}，非常简单，无需粘贴我认为的代码。

我已成功加载模板和js，但无法对$http.get（外部文件）中创建的控制器进行角度加载。

这是我得到的错误：错误：[ng：areq] http://errors.angularjs.org/1.5.2/ng/areq?p0=myCtrl&p1=not%20a%20function%2C%20got%20undefined

我已尝试使用template.html，包括和不包含appendChild，$compile ..

感谢您的时间：）

AngularJS从外部文件（GET）

0 个答案: