I'm trying to set a controller on a dom object at runtime:
Example code here: http://jsfiddle.net/2FL3z/3/
<div id="ctrl1">
<p>{{message}}</p>
<a href="#/view1" class="btn">{{btn1}}</a>
<a href="#/view2" class="btn">{{btn2}}</a>
</div>
<div id="ctrl2">
<p>{{message}}</p>
<a href="#/view1" class="btn">{{btn1}}</a>
<a href="#/view2" class="btn">{{btn2}}</a>
</div>
/* CONTROLLER 1 (first.js) */
define([], function () {
function FirstController($scope) {
$scope.message = "I'm the 1st controller!";
$scope.btn1 = "Ctrl1 Btn 1";
$scope.btn2 = "Ctrl1 Btn 2";
}
// Get a reference to div#ctrl1 and apply this controller to it.
return FirstController;
});
/* CONTROLLER 2 (second.js) */
define([], function () {
function SecondController($scope) {
$scope.message = "I'm the 2nd controller!";
$scope.btn1 = "Ctrl2 Btn 1";
$scope.btn2 = "Ctrl2 Btn 2";
}
// Get a reference to div#ctrl2 and apply this controller to it.
return SecondController;
});
<!-- Expected Output -->
<div id="ctrl1" ng-controller='FirstController'>
<p>I'm the 1st controller!</p>
<a href="#/view1" class="btn">Ctrl1 Btn 1</a>
<a href="#/view2" class="btn">Ctrl1 Btn 2</a>
</div>
<!-- References $scope of ctrl2 -->
<div id="ctrl2" ng-controller='FirstController'>
<p>I'm the 2nd controller!</p>
<a href="#/view1" class="btn">Ctrl2 Btn 1</a>
<a href="#/view2" class="btn">Ctrl2 Btn 2</a>
</div>
Any suggestions on how to get that to work. I'm using https://github.com/matys84pl/angularjs-requirejs-lazy-controllers but it looks like the entire app gets the controller based on route path. I need to break up the application into sections each controlled by different controllers.
I've read that it's frowned upon to mod the dom in the controller so I'm looking for best practice - maybe specify the dom element in routes.js:
routeConfig.config('../partials/view1.html', 'controllers/first', '#someDomElementID')
I don't think angularjs-requirejs-lazy-controllers is set up that way.
Thanks!