Load angularJs controller

Question

I had already declared my app and controller in separate file and below is how i am loading my controller html DOM but it is not showing that message. Can someone please guide how to achieve this.

HTML:

<div id="bnProblemList">
    <div ng-controller="problemListCtrl" data-ng-init="init()">
        <div ng-view="">this is my message = {{message}}</div>
    </div>
</div>

JS:

html = $j('#bnProblemList').html();
$compile(html)(scope);

Please let me know how to inject or load ng-controller html dynamically.

Is your ng-app set before use the ng-controller ? Is your controller include on your index ? — Pierre-Alexandre Moller
– Pierre-Alexandre Moller, Commented Aug 24, 2015 at 11:47

Chetan Purohit · Accepted Answer · 2015-08-24 11:50:51Z

1

Your controller declaration is wrong. You should do it like this:

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

myApp.controller('problemListCtrl', ['$scope', 
  function($scope) {
      $scope.message = "This is my message :-)";
  }
]);

answered Aug 24, 2015 at 11:50

Chetan Purohit

3921 gold badge3 silver badges16 bronze badges

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

2 Comments

Rakesh Rai Over a year ago

I had added this code in my main app.js which looks like below:-

Rakesh Rai Over a year ago

Paul Boutes · Accepted Answer · 2015-08-24 11:55:24Z

0

A proper way is to declare your Controller into an anonymous function, and add it to a module. Then, you have to set your ngApp.

Controller.js

Here, we will declare our controller, and create an app module. Then, we will declare ctrl as our controller into our app module.

  (function(){

  function Controller($scope) {

    $scope.name = 'toto';

  }

  angular
  .module('app', [])
  .controller('ctrl', Controller);

  })();

HTML

  <body ng-app='app' ng-controller="ctrl">

    <p>My name is {{name}}</p>

 </body>

And don't forget to include your script tag :

<script src="controller.js"></script>

answered Aug 24, 2015 at 11:55

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

Comments

Raj · Accepted Answer · 2015-08-24 11:58:34Z

0

You can try Like below Example:-

Html Page:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
 <title> Controller</title>  
 <script src="../Js/angular.min.js"></script>
 <script src="../Js/Controller.js"></script>   
</head>
<body>
  <div ng-controller="MyFirstController">
    {{ Msg }}
  </div>
</body>
</html>

ControllerJs Page:

var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
  $scope.Msg="Hello First Conroller";
})

answered Aug 24, 2015 at 11:58

Raj

1491 gold badge2 silver badges9 bronze badges

Comments

Rakesh Rai · Accepted Answer · 2015-08-28 10:39:08Z

0

i was able to load/ inject controller dynamically by the help of below code

<div id="bn" ng-controller="myCtrl as vm">
    <div ui-view=''></div>
</div>

<script>
    angular.element(document).injector().invoke(function($compile, $state) {
        $state.go('myCtrl');
        var scope = angular.element($j("#bn")).scope();
        $compile($j("#bn"))(scope);
    });
</script>

answered Aug 28, 2015 at 10:39

Rakesh Rai

12 bronze badges

Collectives™ on Stack Overflow

Load angularJs controller

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related