Use angular controller in dynamically loaded html

Question

I have following code

app.js

var app = angular.module('myModule', ['schemaForm', 'base64', 'ngRoute']);

taskController.js

app.controller('TaskController', function($scope, AuthService, $http, $base64, $location) {
    $scope.fetchFormKey = function() {
        $http.defaults.headers.common['Authorization'] = 'Basic ' + AuthService.auth;
        $http.get(restServerURL + '/task/' + $scope.taskId + '/form').
        success(function(data) {
            $scope.formKey = "./partials/itpTrainingCreation/" + data.key + ".html";
        });
    }

}

task.html

<h2>Generated form</h2>
<div ng-controller="TaskController" ng-init="fetchFormKey()">
    <div ng-include src="formKey"></div>
</div>

In dynamically loaded file (loaded by ng-include) i want to define angular controller which will be used by this file.

dynamic.html (example)

<script>
angular.module('myModule').controller('DymanicController', function($scope, AuthService, $http, $base64, $location) {
 $scope.exampleValue="myCustomValue";
});
</script>
<div ng-controller="DymanicController">
    {{exampleValue}}
</div>

Unfortunately i get following error: http://errors.angularjs.org/1.5.5/ng/areq?p0=DymanicController&p1=not%20a%20function%2C%20got%20undefined

How can I change my code to fix this problem?

stackoverflow.com/questions/15250644/…

Thalaivar
– Thalaivar

2016-05-11 12:35:05 +00:00
Commented May 11, 2016 at 12:35 — Thalaivar
– Thalaivar, Commented May 11, 2016 at 12:35

Shubham Takode · Accepted Answer · 2016-05-11 13:10:24Z

2

I assume your dynamic contents have some template. I think you should take look at script in angularjs

<script type="text/ng-template" id="/tpl.html">
  Content of the template.
</script>

and use ui-routing to add your dynamic content, assign controller there in router.

answered May 11, 2016 at 13:10

Shubham Takode

5331 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2016-05-11 12:54:48Z

0

If you wanna load a module on the fly I recommend ocLazyload. That worked pretty well in one side project of mine.

myApp.controller("MyCtrl", function($ocLazyLoad) {
  $ocLazyLoad.load('testModule.js');
});

works well with routers.

answered May 11, 2016 at 12:54

Daniel

6192 gold badges7 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:58:51Z

0

I found similar question how to include javascript file specific to each view angularjs

    You can't. Angular does not load javascript parts from a template.
    What you should do is to include them in your main application anyway.
    All of the controllers should be loaded while the main app is initiating.

Could someone confirm this thesis?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 13, 2016 at 7:45

sQer

1,1518 silver badges9 bronze badges

Collectives™ on Stack Overflow

Use angular controller in dynamically loaded html

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related