Question

我在Laravel中制作了一个REST api，我使用AngularJS作为Frontend。在我的index.html中，我有一个导航栏，在所有视图中都可见。在我的导航栏上，我将实现一个输入字段，该字段应该用于搜索，具体取决于哪个视图处于活动状态。在我的导航栏上，我有4个选项卡，它们将导航到一个视图并从我的api中获取数据。

每个标签都有一个包含CRUD功能的控制器。所以我的问题是如何通过提交搜索表单来获取可见的视图数据。

这是我的app.js，我定义了所有状态，并为我的index.html配备了一个控制器。

    var app = angular.module('myApp', ['ui.router', 'satellizer', 'ngStorage'])
        .config(function($stateProvider, $urlRouterProvider, $authProvider,$provide) {


        $authProvider.loginUrl = 'http://.../authenticate';
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'view/home.html',
                controller: 'authController'
            }).state('register', {
                url: '/register',
                templateUrl: 'view/register.html',
                controller: 'authController'
            }).state('login', {
                url: '/login',
                templateUrl: 'view/login.html',
                controller: 'authController'
            }).state('companies', {
                url: '/company?page',
                templateUrl: 'view/company/companies.html',
                controller: 'companyController'
            }).state('company', {
                url: '/company/:id',
                templateUrl: 'view/company/company.html',
                controller: 'companyController'
            }).state('users', {
                url: '/user?page',
                templateUrl: 'view/user/users.html',
                controller: 'userController'
            }).state('user', {
                url: '/user/:id',
                templateUrl: 'view/user/user.html',
                controller: 'userController'
            }).state('offerposts', {
                url: '/offerpost?page',
                templateUrl: 'view/offerpost/offerposts.html',
                controller: 'offerpostController'
            }).state('offerpost', {
                url: '/offerpost/:id',
                templateUrl: 'view/offerpost/offerpost.html',
                controller: 'offerpostController'
            }).state('wantedposts', {
                url: '/wantedpost?page',
                templateUrl: 'view/wantedpost/wantedposts.html',
                controller: 'wantedpostController'
            }).state('wantedpost', {
                url: '/wantedpost/:id',
                templateUrl: 'view/wantedpost/wantedpost.html',
                controller: 'wantedpostController'
            });


        function redirectWhenLoggedOut($q, $injector) {
            return {
                responseError: function (rejection) {
                    var $state = $injector.get('$state');
                    var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid'];

                    angular.forEach(rejectionReasons, function (value, key) {
                        if (rejection.data.error === value) {
                            localStorage.removeItem('user');
                            $state.go('login');
                            console.log("hej");
                        }
                    });

                    return $q.reject(rejection);
                }
            }
        }

        $provide.factory('redirectWhenLoggedOut', redirectWhenLoggedOut);

    });



app.controller('mainCroller',
    function ($scope, $state, $location, $auth, $rootScope, $localStorage, $window) {

        $scope.testUrl = "http://.../admin/";
        $rootScope.url = $scope.testUrl;

        $rootScope.currentUser = $localStorage.currentUser;

        console.log($localStorage.currentUser);

        $rootScope.getPages = function(num) {
            return new Array(num);
        };



        $scope.navClass = function (page) {
            var currentRoute = $location.path().substring(1);
            return page === currentRoute ? 'active' : '';
        };

        $scope.loadLogin = function () {
            $state.go('login');
        };

        $scope.loadRegister = function () {
            $state.go('register');

        };

        $scope.loadCompanies = function () {
            $state.go('companies', {page:1});
        };

        $scope.loadUsers = function () {
            $state.go('users', {page:1});
        };

        $scope.loadOfferposts = function () {
            $state.go('offerposts', {page:1});
        };

        $scope.loadWantedposts = function () {
            $state.go('wantedposts', {page:1});
        };

        $scope.logout = function() {
            $auth.logout().then(function() {
                $localStorage.$reset();
                $rootScope.currentUser = "";
                $state.go('login');

            });
        };

        $scope.isAuthenticated = function() {
            return $auth.isAuthenticated();
        };


    });

Answer 1

您可以使用事件轻松完成此操作。在您的搜索控制器中，您可以在范围内广播一个事件（我将在此示例中使用$rootScope）：

function search() {
  $rootScope.$broadcast('search-initiated', {searchText: $scope.searchText});
}

然后在您的其他每个控制器中，您都可以收听此事件：

$rootScope.$on('search-initiated', function(event, args) {
  // do something with the search text
  var searchText = args.searchText;
});

搜索功能：从index.html更新不同的视图

1 个答案: