angular.js - angular 搜索功能如何处理?
phpcn_u1582
phpcn_u1582 2017-05-15 17:03:22
0
3
549

假设我有两个控制器,这两个控制器是兄弟关系
ListController ==> 列表控制器
SearchController ==> 搜索控制器

页面一上来就在列表控制器中 请求数据成功后挂载到 $scope.data 然后在列表视图中应用。

but 我现在要搜索。

搜索控制器中有方法。输入文字点击确认,获取服务端返回的数据。

ok 我现在成功获取到数据了,我怎么把数据应用到 列表控制器 中 来渲染列表视图?

phpcn_u1582
phpcn_u1582

répondre à tous(3)
淡淡烟草味

Vous pouvez utiliser la diffusion angulairejs, le code clé est le suivant
ListController

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

SearchController

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

Traitement du contrôleur de niveau supérieur $rootScope

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

C'est tout. Le noyau est l'utilisation de la diffusion

phpcn_u1582

Écrivez un service pour sauvegarder les données globales. Lorsque vous entrez dans la page de liste, déterminez d'abord si l'objet de données global contient des données. S'il n'y a pas de données, les données d'origine seront affichées directement. S'il y a des données, cela signifie que la recherche est terminée, et les données de recherche ou autres. les méthodes d’affichage que vous aimez seront affichées.

左手右手慢动作

Après avoir cliqué sur Rechercher, vous devez bien sûr demander à nouveau les données. Réattribuez simplement la valeur à votre $scope.data= et c'est ok

.
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal