如果在页面中使用两次相同的控制器,则停止反映彼此的模型

时间:2015-11-23 05:02:06

标签: javascript angularjs

我在我的页面中使用过mvc部分控制两次搜索功能。 它有自己的控制器来搜索,所以我的页面有两个同名的控制器。

<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
     <div id="search1">
        @Html.Partial("_SearchPartial") // say it search1
        // some other code to show search results
        // ....               
        // ..
     </div>
     <div id="search2">
        @Html.Partial("_SearchPartial") // say it search2
        // some other code to show search results
        // ....               
        // ..
     </div>
</div>

这是_SearchPartial:

<form name="SearchCommon">
    <div ng-model="search" ng-controller="SearchPartialController">
            <div>
                <input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
            </div>

            <div>
                <input type="text" value="" placeholder="Make" ng-model="search.Make" />
            </div>

            <div>
                <input type="text" value="" placeholder="Year" ng-model="search.Year" />
            </div>

            <div>
                <input type="submit" value="SEARCH" ng-click="searchdata(search)" />
            </div>
    </div>
</form>

现在在MainController初始化时,我在search方法中设置了SetSearchParam()模型值,如下所示:

$scope.SetSearchParam = function(){
   var s = {};
   s.Make = "Test";
   s.Year = "2012";
   s.Stock = "5"

   $scope.search = s; 
};

由于在search中使用了SearchPartialController模型,并且页面有两个搜索控件,因此将在两个部分控制器中设置s的值。此外,当我在search1中更改params时,它将反映search2。

我希望那些搜索参数只为search1设置,而不是为search2设置。 当我改变search1 params时,它不应该反映search2,反之亦然。

有没有办法实现它?

1 个答案:

答案 0 :(得分:0)

我认为您应该在功能之前初始化过滤器(搜索)。

控制器:

$scope.search1 = { Make : "Test", Year: "2012", Stock : "5" };
$scope.searchdata = function(search){console.log(search);};

您的观点:

<body ng-controller="SearchPartialController">
    <form ng-submit="searchdata(search1)">
        <input type="text" placeholder="Stock" ng-model="search1.Stock" />
        <input type="text" placeholder="Make" ng-model="search1.Make" />
        <input type="text" placeholder="Year" ng-model="search1.Year" />
        <button type="submit" class="btn btn-sm btn-primary">
                    Save
        </button>
    </form >
</body>