Блог

У меня есть REST api, созданный в Laravel, где я использую AngularJS в качестве интерфейса. В моем 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();
        };


    }); 
  

Вы можете использовать событие для выполнения этого довольно легко. В вашем поисковом контроллере вы можете транслировать событие в область видимости (я буду использовать $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;
});