Include custom angularjs page in another angularjs pages as user control

Question

I am creating application using AngularJS and I am beginner at it. I have created one common page for searching with its separate controller and its working fine, but now I want to include this page in my other pages as user control.

My Searching page is like

<div class="input-group ex col-md-3" ng-app="searchApp" ng-controller="MainSearchController">
.......
.......//My code here
</div>

My controller for Search is:

var sApp=angular.module("searchApp",[]); 
  sApp.controller("MainSearchController", function($scope){
    $scope.Merchants={};    
    var DEMerchantInfo = JSON.parse(localStorage.getItem("DEMerchantInfo"));    
        if(DEMerchantInfo == null || DEMerchantInfo == undefined){
            DEMerchantInfo = new Array;
        }
    $scope.Merchants=DEMerchantInfo;

    $scope.Search=function(){

    var DEMerchantInfo = JSON.parse(localStorage.getItem("DEMerchantInfo"));    
        if(DEMerchantInfo == null || DEMerchantInfo == undefined){
            DEMerchantInfo = new Array;
        }
            $scope.Merchants=DEMerchantInfo;
    }   
});

I am using search page in my other pages like:

 <body class="sidebar-mini" ng-app="MerchantApp">
  <div class="search-panels col-lg-4 col-md-4 col-xs-10">
    <div ng-include src=" 'search.html' "></div>
  </div>
 </body>

but it is not working for me. its giving error.

Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?    p0=MainSearchController&p1=not%20a%20function%2C%20got%20undefined O/<@file:///.....

So can any one please suggest how I can achieve this thing.

dfsq · Accepted Answer · 2016-07-13 07:40:04Z

1

This is how search page template should look like:

<div class="input-group ex col-md-3" ng-controller="MainSearchController">
    <!-- My code here -->
</div>

Note, that I removed ng-app="searchApp" from partial. In your app you will need to add ng-app="searchApp" to some parent container, like body or html.

Then you will need to configure MerchantApp like this:

angular.module('MerchantApp', [
  // some other module dependencies
  'searchApp'
])

answered Jul 13, 2016 at 7:40

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Include custom angularjs page in another angularjs pages as user control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related