在DOM(html）上下文中使用角度作用域函数时出现的问题

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

本文关键字：函数 作用域 问题 html DOM 上下文      更新时间：2023-10-27

编辑：该问题是由于试图使用ng repeat选项迭代函数的返回值，而不是使用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中解决的问题，但这个特定的问题仍然悬而未决。

API发生了变化（不幸的是，用小写字母表示）。查看1.1.5 $location.search()和最新-1.2.x的文档。（困惑：你能发现区别吗？）

search(search, paramValue)

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

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

或者，如果您不介意将依赖项添加到$routeParams（它不会引起函数调用，可能会提高性能-几纳秒：-）

var cat = $routeParams.cat;

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

我似乎试图用ng选项迭代函数返回值，其中有一些逻辑，Angular不喜欢它

与其他MVC框架不同，angular使用脏检查而不是函数来更新DOM，因此，虽然在angular中对DOM（部分）中的函数进行渲染/迭代通常是一种糟糕的做法，但在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;
});
相关文章：