Adding partial views and controller in angular app

I am in the process of optimizing the performance of Angular app. I am using ng-include to add partial views and its controllers. Following is the code snippet

<!--show term rule view-->
<div id="showTermRule" ng-controller="TermRuleController as term" ng-if="showTermRule">
  <div data-ng-include src="'/Relevancy/termRule/termRule.html'" ng-if="!isPublsihed"></div>
  <div data-ng-include src="'/Relevancy/termRule/publishedTermRule.html'" ng-if="isPublsihed"></div>
</div>
<!--show function rule view-->
<div id="showFunctionRule" ng-controller="expressionBuilderController" ng-if="showFunctionRule">
  <div data-ng-include src="'/Relevancy/functionRule/functionRule.html'" ng-if="!isPublsihed"></div>
  <div data-ng-include src="'/Relevancy/functionRule/publishedFunctionRule.html'" ng-if="isPublsihed"></div>
</div>

<div id="showQueryRule" ng-controller="queryBuilderController" ng-if="showQueryRule">
  <div data-ng-include src="'/Relevancy/queryRule/queryRule.html'" ng-if="!isPublsihed"></div>
  <div data-ng-include src="'/Relevancy/queryRule/publishedQueryRule.html'" ng-if="isPublsihed"></div>
</div>

I have a parent controller from where I am making "showTermRule" variable true and broadcasting an event as follows

switch (rule) {
    case "Term Rules":
      $scope.currentRuleDisplayed = 'Significant Terms';
      $scope.showTermRule = true;
      $rootScope.$broadcast('updateTermRule',$scope.profileTree[$scope.currentProfile].termRules,$scope.currentProfile,$scope.profileTree[$scope.currentProfile].id);
    break;

The problem I am facing is when I use ng-if in child controller, say TermRuleController, it is not able to catch the broadcasted event from parent controller. As per my understanding it is because by the time I am broadcasting event div element which is adding controller is not getting added to DOM. I have tried same thing using ng-show. It is working then but then it is taking very long to load the page. Can someone suggest the right way to add partial views and controller. After some research I have found that instead of using ng-include I can use directive. I am yet not sure about it. Also I guess writing service instead of broadcasting might solve the problem but my question is, is it the correct way to add partial views having different controllers?

Solution

You need to keep in mind when using ngInclude to split your templates into partials. Instead of applying a controller to an element in a layout-template, apply the controller to an element in the partial. That way you’ll not need to target its parent’s scopes, coupling controllers together by scope. Here’s an example: Layout.html

<div ng-controller="LoginCtrl">
    <div ng-include="login.html"></div>
</div>

<form-field ng-field-data="{{login.usr_name}}"></form-field>
<form-field ng-field-data="{{login.password}}"></form-field>

In the case above, you would want to handle the login model in the LoginCtrl controller, but the scope of the login partial login.html will be one step deeper. Instead, define the controller on the same level as the partial (see below).

Layout.html: <div ng-include="login.html"></div> Login.html:

<div ng-controller="LoginCtrl">
    <form-field ng-field-data="{{login.usr_name}}"></form-field>
    <form-field ng-field-data="{{login.password}}"></form-field>
</div>

So, in this way $scope of parent and child controller would be same. So, in your case you don't have to broadcast an event , it would be directly available in the child controller.

Hope, this articles helps you out from the problem that you are dealing.