在动态添加到页面后，模板不会被编译

Question

Edit: I found the real problem and I'm working to find a solution for it. The problem is basically the fact that i angular is not able to detect the dependencies in the controller which is loaded after the on-click-event. So my controller function won't be executed.

I'm recently trying to get deeper into angularJS. Therefore I was creating some applications which were builtin on different pages. Now I tried to bring them together on one single page. Since I had those multiple apps I had to bootstrap them manually. Even thought everything works fine I want to make the whole page into a single app. And this is the point at which the problem occurs. There were three different apps on my page: The first two are directly loaded together with the the page. But the third one gets dynamically loaded by adding a div with an on-click-event. The event also loads the specific scripts like controllers and services. For some reason the loaded template isn't compiled and the raw angular expressions are displayed on the page.

Edit: This is the part in my php-programm where the scripts for the app itself are added to the page:

$jScripts = 
'<script type="text/javascript" src="' . WEBURI . '/js/select/core/core.js"></script>'."
".
'<script type="text/javascript" src="' . WEBURI . '/js/select/core/services/configFactory.js"></script>';

The core.js scripts defines the angular.module with its dependencies.

The specific spricts are added in the php Viewscript which is called by starting the click-event:

echo '
<script type="text/javascript" src="' . WEBURI . '/js/select/core/services/organisationCiFactory.js"></script>
<script type="text/javascript" src="' . WEBURI . '/js/select/organisationCiSelect/controllers/selectController.js"></script>
';

The controller looks like this:

angular
    .module('cidb.core')
    .controller('cidb.core.organisationCiSelectCtrl',
        [
            '$scope',
            'cidb.core.Config',
            'cidb.core.OrganisationCi',
            SelectCtrl
        ]
    );

The part in my php Viewscript:

<div ng-cloak="ng-cloak">
<div ng-controller="cidb.core.organisationCiSelectCtrl" >
    //My-Template
<div>
</div>

Answer 1

You should not delay scripts loading in angularJS, link it directly to your index.html

In production, you might want to minify your source code into a single js file