如何在页面上多次使用同一控制器和同一视图

Question

I am trying to make a single page app where I want to load screens (partial views) via ajax. The problem is that the user want's to open the same screen multiple times (in tabs). I tried to load the controller code on initial load and loaded my screens (partial views) via AJAX. But the controller is already executed by the time the screen (partial view) is loaded.

I want to know how to make controller run after the partial view is loaded?

Or better yet, how to tackle this situation where i want to load the same view multiple time with different data/state?

Answer 1

I found a solution to the problem I was facing. I am not sure if it is the best way to move forward but given the limited knowledge I have on AngularJS so far, this solution is my best bet. If anyone can come up with a better solution, I am all ears.

Instead of registering controller up front, I am registering the controller when the view is requested.

Also, I am appending a new div to the container where I want the view to appear. There is some jQuery on the page that hides other views and only shows the current view.

Step 1

Assigned $controllerProvider.register to a variable on App Scope

var myApp = angular.module("myApp", []);
angular.module("myApp").config(function ($controllerProvider) {
                   myApp.registerCtrl = $controllerProvider.register;
               });

Step 2

In the function where I have to load the view dynamically, I did the following

$("#viewContainer").append($compile('<div ng-include="pageUrl"></div>')($scope));

The above line adds a div with ng-include directive. It also compiles the directive. The pageUrl is where I am keeping the url to the view I want to include.

Step 3

In the view file I have to load, I have include JavaScript file that holds my controller. The rest of the file contains simple HTML with directives. In the JS file, instead of creating the controller, I am registering the controller like

angular.module('myApp').registerCtrl("MyController", MyController);

I hope this is helpful to others.