angular.js - angular 搜尋功能如何處理?
phpcn_u1582
phpcn_u1582 2017-05-15 17:03:22
0
3
579

假設我有兩個控制器,這兩個控制器是兄弟關係
ListController ==> 清單控制器
SearchController ==> 搜尋控制器

頁面一上來就在列表控制器中 請求資料成功後掛載到 $scope.data 然後在列表視圖中應用。

but 我現在要搜尋。

搜尋控制器中有方法。輸入文字點選確認,取得服務端回傳的資料。

ok 我現在成功取得到資料了,我怎麼把資料應用到 列表控制器 中 來渲染列表視圖?

phpcn_u1582
phpcn_u1582

全部回覆(3)
淡淡烟草味

可以用angularjs的廣播,關鍵程式碼如下
ListController

$scope.$on('SearchController.onSearch',function(e,data){
    console.log(data);
});

SearchController

//搜索方法请根据实例情况处理 ,这里只进行获得结果之后的处理
$scope.search = function(){
    var data = [];//搜索到的数据,如果是异步拿到的,请把以后的代码放到回调中
    $scope.$emit('SearchController.onSearch',data);
}

$rootScope頂級控制器處理

$scope.$on('SearchController.onSearch',function(e,data){
    $scope.$broadcast('SearchController.onSearch',data)    
});

就可以了。核心是利用了廣播

phpcn_u1582

寫個service呀,用來保存全域資料。進入列表頁面的時候,先判斷下這個全域數據物件是否有數據,沒有數據直接顯示原來的數據,有數據表示搜尋過了,就顯示搜尋數據或其他你喜歡的顯示方式。

左手右手慢动作

點擊了搜索,當然是重新請求數據了,直接重新給你的$scope.data= 賦值就ok

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板