在 DOM (html) 上下文中使用角度范围函数时的问题答案

【问题标题】：Problems when using angular scope functions within DOM (html) context在 DOM (html) 上下文中使用角度范围函数时的问题
【发布时间】：2013-11-27 10:00:40
【问题描述】：

编辑：问题是由于尝试使用 ng-repeat \ ng-options 迭代函数的返回值，而不是使用 Promise 将数据解析为常规对象而引起的。

代码：

 $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>

以上内容冻结了屏幕，没有错误。

尝试使用插值

 '{{layout.getPartialUriSafe()}}'

然后我得到一个角度解析器错误。

也尝试使用原始插值，但也没有运气：

'{{layout.getPartialUriSafePrimitive}}'

layout.getPartialUriSafePrimitive - 包含带有部分 URI 的字符串。

提前感谢您的帮助，我一直在尝试升级到 ng 1.2.x，到目前为止遇到了许多在 1.2.2 中解决的问题，但这个特定问题仍然存在。

【问题讨论】：

标签： javascript angularjs angularjs-ng-include

【解决方案1】：

API 发生了变化（遗憾的是小写字母）。检查1.1.5$location.search() 和latest - 1.2.x 的文档。（谜题：你能看出区别吗？）

search(search, paramValue)

在 1.1.5 中，search 参数是可选的，在 1.2.x 中不是！所以试试这个：

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

或者，如果您不介意将依赖项添加到 $routeParams（它不会引发函数调用，可能性能更好 - 几纳秒 :-)

var cat = $routeParams.cat;

【讨论】：

感谢您的回答 nikos 和信息。尽管我的具体问题似乎是试图用 ng-repeat 迭代一个函数（返回一个列表）。我会发布一个答案，你可以告诉我这是否有意义。再次感谢！
@OlegTikhonov 是的，这是有道理的。我在从 UI 迭代函数调用时遇到了类似的麻烦。我建议您将您的答案标记为解决方案，以便其他人知道。
从现在起我只能在 2 天内做到这一点，一旦我能够做到，我会确保做到这一点。再次感谢！

【解决方案2】：

虽然我会分享我的答案，因为我听到许多开发人员抱怨从 1.0.x 迁移到 1.2.x 的困难：

看来我试图用 ng-options 迭代函数返回值，其中包含一些逻辑，而 Angular 不喜欢它。

与其他 MVC 框架不同，Angular 使用脏检查而不是函数来更新 DOM，因此在 Angular 中渲染\迭代您的 DOM(partials) 中的函数通常是一种不好的做法，在更高版本的 Angular 中，它可能只需挂起您的应用程序。

我的 companySettings.html 文件中有类似的内容：

<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>

控制器中的功能是：

$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');
 });
}

改为：

<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>

控制器：

$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;
});

【讨论】：