Question

我正在使用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:///.....

所以任何人都可以建议我如何实现这个目标。

Answer 1

这是搜索页面模板的样子：

<xctk:DateTimePicker Height="20" Width="200" AllowTextInput="False" />

注意，我从部分删除了<div class="input-group ex col-md-3" ng-controller="MainSearchController">  </div>。在您的应用中，您需要将ng-app="searchApp"添加到某个父容器，例如ng-app="searchApp"或body。

然后您需要像这样配置html：

MerchantApp

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

1 个答案: