Problems when using angular scope functions within DOM (html) context

Question

EDIT: The problem was caused by trying to iterate over a function's return value using ng-repeat \ ng-options, instead of resolving the data into a regular object using a promise.

code:

 $scope.layout.getPartialUriSafe = function(){
       return $sceDelegate.getTrusted($sce.RESOURCE_URL, $scope.layout.getPartialUri());
    }

$scope.layout.getPartialUri = function(){
    var cat = $location.search().cat;
    switch(cat){
        case 'settings':
            return 'partials/companySettings.html';
        case 'scouters':
            $scope.model.roleType = 'scouter';
            $scope.layout.roleTitle = $filter('translate')('SCOUTERS');
            return 'partials/roles.html';
        case 'recruiters':
            $scope.model.roleType = 'recruiter';
            $scope.layout.roleTitle = $filter('translate')('RECRUITERS');
            return 'partials/roles.html';
        case 'social':
            return 'partials/socialLinks.html';
        case 'design':
            return 'partials/companyDesign.html';
        default:
            return 'partials/companySettings.html';
    }
}

HTML:

<div class="settingsInnerContainer">
    <div data-ng-include data-src="layout.getPartialUriSafe()"></div>
</div>

The above freezes the screen with no errors.

Tried using an interpolated value

 '{{layout.getPartialUriSafe()}}'

but then I got an angular parser error.

Also tried to use a primitive interpolation, but no luck also:

'{{layout.getPartialUriSafePrimitive}}'

layout.getPartialUriSafePrimitive - contains a string with the partial URI.

Thanks in advance for any assistance, I've been trying for a while to upgrade to ng 1.2.x, and so far encountered many issues that were solved in 1.2.2, but this particular issue still remains open.

Answer 1

I though I'd share my answer, since I heard many developers complaining about difficulties with migrating from 1.0.x to 1.2.x:

It appears that I was trying to iterate over a function return value with ng-options, which had some logic within it, and Angular didn't like it.

Unlike other MVC frameworks, angular uses dirty checking rather then functions to update the DOM, so while rendering \ iterating over a function within your DOM(partials) in Angular is generally a bad practice, in later versions of angular, it might just hang your application.

I had something like that in my companySettings.html file:

<select name="industry" class="filedExpand" data-ng-model="model.formData.industry" data-ng-options="industry.id as industry.name for industry in model.industries()" data-ng-required="true">
    <option value=''>{{'INDUSTY' | translate}}</option>
</select> 

and the function in the controller was:

$scope.model.industries = function(){
    if($scope.model.industryList){
    return $scope.model.industryList;
}

regService.getIndustries().then(function(data){
    $scope.model.industryList = data.data;
    return data.data;
},
function(data){
    console.log('error fetching industries');
 });
}

Changed to:

<select name="industry" class="filedExpand" data-ng-model="model.formData.industry" data-ng-options="industry.id as industry.name for industry in model.__industries" data-ng-required="true">
    <option value=''>{{'INDUSTY' | translate}}</option>
</select>

Controller:

$scope.model.getIndustries = function(){
        var deferred = $q.defer();
        var industries = regService.getIndustries();
        if(industries){
            // console.log($scope.model.industryList);
            deferred.resolve(industries);
            return deferred.promise;
        }

        regService.loadIndustries().then(function(data){
            // $scope.model.industryList = data.data;
            regService.setIndustries(data.data);
            deferred.resolve(data.data);

        },
        function(data){
            // console.log('error fetching industries');//supress
            deferred.resolve([]);
            regService.setIndustries([]);
        });
        return deferred.promise;
}

---

$scope.model.getIndustries().then(function(data){
    $scope.model.__industries = data;
});

Answer 2

There is an API change (in small letters unfortunately). Check the docs for 1.1.5 $location.search() and latest - 1.2.x. (Puzzle: can you spot the difference?)

search(search, paramValue)

In 1.1.5 the search argument is optional, in 1.2.x it is NOT! So try this:

var cat = $location.search("cat");

Or, if you do not mind adding the dependency to $routeParams (it does not incur a function call, possibly better performance - by a few nanoseconds :-)

var cat = $routeParams.cat;