在另一个 angularjs 页面中包含自定义 angularjs 页面作为用户控件答案

【问题标题】：Include custom angularjs page in another angularjs pages as user control在另一个 angularjs 页面中包含自定义 angularjs 页面作为用户控件
【发布时间】：2016-07-13 07:35:51
【问题描述】：

我正在使用 AngularJS 创建应用程序，我是初学者。我已经创建了一个通用页面，用于使用其单独的控制器进行搜索并且工作正常，但现在我想将此页面作为用户控件包含在我的其他页面中。

我的搜索页面是这样的

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

我的搜索控制器是：

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;
    }   
});

我在其他页面中使用搜索页面，例如：

 <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>

但这对我不起作用。它的给出错误。

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

那么任何人都可以建议我如何实现这一目标。

【问题讨论】：

标签： jquery angularjs twitter-bootstrap

【解决方案1】：

搜索页面模板应该是这样的：

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

请注意，我从部分删除了ng-app="searchApp"。在您的应用中，您需要将ng-app="searchApp" 添加到某个父容器，例如body 或html。

然后你需要像这样配置MerchantApp：

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

【讨论】：