1

I am writing some forms for adding and editing resources. I am using Angucomplete-alt (https://github.com/ghiden/angucomplete-alt) and my own dropdown directive to get choices from the database. Those are in a separate controller from the main form. My regular text fields populate fine on the edit form, but I have issues with the Angucomplete and selects. The scope data is there on page load. I have written a function to grab it using the ID in the URL. But they don't always populate unless you reload the page. How can I get them to populate EVERY time?

Here is my function to populate the form: 

 $scope.popForm = function(clientId) {
        var config = {
            params: {clientId: $stateParams.clientId},
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        };
        $http.get('assets/php/clients/pop_client.php', config)
            .then(function(data) {
                    var realStatus = data.data.status;
                    if(realStatus == 'success'){

                        //Set the $scope from the JSON response
                        $scope.client = data.data.client;


                        //Broadcast a bunch of events with data to the dropdowns
                        $timeout(function() { 
                            $rootScope.$broadcast('setTypeDropdown', data.data.client.type);
                            $rootScope.$broadcast('setCatDropdown', data.data.client.category);
                            $rootScope.$broadcast('setTeamDropdown', data.data.client.team);
                            $rootScope.$broadcast('setA1Dropdown', $scope.client.assigned1);
                            $rootScope.$broadcast('setA2Dropdown', $scope.client.assigned2);
                        });
                    }
        });
};

I have another controller that takes care of the selects, so that's why there are broadcasts of the data down to their isolated scopes. Here is one of the $on functions, since they are all basically the same. (There MUST be a less convoluted way of doing this...)

// Options are the select options that I get from the database 
// for each instance of the select controller

$scope.$on('setTypeDropdown', function(event, type) {
                    var i = 0;
                    $.each($scope.options, function(){
                        if (this.value == type){ 
                                $scope.client.type = $scope.options[i];
                        }
                        i++;
                    });
});

So, IS there a better way of doing this? Because this doesn't quite work...

EDIT: Angucomplete-alts are working well now. Just my convoluted selects to worry about. Wonder if it wouldn't be better to de-Angularize them and not use my directive.

aooawnewkn
  • 33
  • 4
  • You have 5 angucomplete-alt directives? What is actually passed to each directive as local data? – ghiden Oct 23 '14 at 09:57
  • I only have 2 angucompletes, and I've got those working now. It's the 5 selects I worry about. Each one has an `ng-init="getOptions(option-type)"` which grabs the options you should be able to choose from the database. – aooawnewkn Oct 23 '14 at 11:28
  • Having 5 lines of broadcasts looks really scary to me. And personally I try not to have ng-init in my code. So it looks like you need serious restructuring of your code but sorry it is very hard to see what is really going on in your app. I can't help you with this much of snippets. – ghiden Oct 27 '14 at 19:05
  • Yep, gonna rewrite that section when I get time, and that should solve the problem. Thanks for your time. – aooawnewkn Oct 28 '14 at 09:55

0 Answers0