Question

我不是将多个变量附加到函数，指令等上的忠实粉丝。我宁愿使用单个参数并使用变量处理层上缺少的元素。这通常使功能更加非干燥友好，并且通常效果很好。但是，我似乎已经切断了我的范围 - 对'isAllowedToSeeMostPopularOption / CorrectOption'的更改只会冒充至statusBar.resultsDisplay并且不会继续到$ scope.quiz。这是我将要手动处理的东西，或者我错过了一种不切断泡沫的方法。

控制器调用指令（顶层）：

$scope.statusBar.resultsDisplay = updateResultsDisplayArgs();

updateResultsDisplayArgs = function () {
        if ($scope.quiz) {
            return {
                optionListHeader: str.get('quiz.answers'),
                options: [
                    { model: $scope.quiz.isAllowedToSeeMostPopularOption, label: str.get('quiz.allowed-to-see-popular-answer') },
                    { model: $scope.quiz.isAllowedToSeeCorrectOption, label: str.get('quiz.allowed-to-see-correct-answer') }
                ]
            }
        } else {
            return {};
        }
    }

指令语法：

<option-list-dropdown directive-args="statusBar.resultsDisplay"></option-list-dropdown>

指令：

module.exports = ng(function () {
return {
    scope: {
        directiveArgs: '='
    },

    templateUrl: templateUrl,

    controller: 'optionListDropdownController'
};

}）;

指令控制人：

var str = require('str-js'),
_ = require('lodash'),
CONST = require('../../../common/const.json'),
questionUtils = require('../question-utils'),
questionStatuses = CONST.questionStatuses,
questionTypes = CONST.questionTypes;

module.exports = ng(function ($scope) {
var generateGuid = function () {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
      s4() + '-' + s4() + s4() + s4();
}

_.extend($scope, {
    questionStatuses: questionStatuses,
    questionTypes: questionTypes,
    optionListTooltip: str.get('quiz.results-display-tooltip'),
    optionsListId: 'option_list_' + generateGuid(),
    doThings: function (zz) {

    }

});

}）;

指令语法：

<ul>
    <li><label class="label" str="quiz.answers"></label></li>
    <li ng-repeat="option in directiveArgs.options">
        <input id="{{ optionsListId  + '_' + $index }}" type="checkbox" ng-model="option.model">
        <label class="label" for="{{ optionsListId  + '_' + $index }}">{{ option.label }}</label>
    </li>
</ul>

缩短版：我真的认为我在这里做的事情正在引起我的问题 - 变化冒出来并改变$ scope.statusBar.resultsDisplay。就好像使用$ scope.quiz的select元素创建一个新对象正在打破范围冒泡路径：

$scope.statusBar.resultsDisplay = updateResultsDisplayArgs();

updateResultsDisplayArgs = function () {
    if ($scope.quiz) {
        return {
            optionListHeader: str.get('quiz.answers'),
            options: [
                { model: $scope.quiz.isAllowedToSeeMostPopularOption, label: str.get('quiz.allowed-to-see-popular-answer') },
                { model: $scope.quiz.isAllowedToSeeCorrectOption, label: str.get('quiz.allowed-to-see-correct-answer') }
            ]
        }
    } else {
        return {};
    }
}

Angular JS - 创建新对象后丢失范围

0 个答案: