Question

我认为我正在污染我的范围，但我无法弄清楚如何或如何避免它：

我有一个带有不同参数的TWICE指令：

<div profile-summary attributes="user.attributes" sentiment="positive" limit="3" threshold="20"> </div>
<div profile-summary attributes="user.attributes" sentiment="negative" limit="3" threshold="-20"> </div>

它打印出排名为scope.attributes排序的asc（如果情绪=“正面”）或desc（如果是负面）的前3个列表。

这会调用指令：

app.directive('profileSummary', function () {
    var features;
    return {
        restrict: "A",
        scope: {
            attributes: '=',
            sentiment: '@',
            threshold: '=',
            limit: '='},
        template: '<h5>{{title}}</h5><ol><li ng-repeat="attr in attributes">{{attr.categorical_value}}</li></ol>',
        link: function (scope, element, attrs) {
            //do stuff to

            if (scope.sentiment == 'positive') {
                scope.title = 'Loves';
                features = _.sortBy(scope.attributes, function (f) {
                    return (100000 - f.reactivity)
                });
                features = _.filter(features, function (f) {
                    return f.reactivity > scope.threshold
                });
            } else {
                scope.title = 'Hates';
                features = _.sortBy(scope.attributes, function (f) {
                    return (f.reactivity)
                });
                features = _.filter(features, function (f) {
                    return f.reactivity < scope.threshold
                });
            }
            features.length = scope.limit;


            scope.attributes = features; //am I polluting global scope? how to avoid?
        }
    }

问题是第二个指令复制了第一个指令的输出。如果我删除第一个指令，我得到正确的（不同的）输出。

Answer 1

我能想到解决它的一种方法是在你的指令模板中使用features数组而不是属性数组。这样就不会触及属性数组了

  template: '<h5>{{title}}</h5><ol><li ng-repeat="attr in features">{{attr.categorical_value}}</li></ol>',

现在应该在指令范围内定义功能，如

scope.features = _.sortBy(scope.attributes, function (f) {

所以这不是必需的

scope.attributes = features; //delete

如何避免在angular.js指令中修改模型的污染范围

1 个答案: