Question

我有一个问题，this并不是我所期望的，但我无法弄清楚为什么在数小时后将我的头发撕掉。根据我的理解this在两个函数中应该是相同的this，但它不是。这会导致我的自定义选择在您在下拉列表中选择其他内容时不更新标签，因为getCurrentOption始终返回undefined，因为它尝试从错误的.currentOption对象访问this

有人可以解释这里发生了什么吗？以及如何使它将相同的this对象传递给两个函数？

co-select.html：

<div class="co-select-form-control">
    <label class="co-inset-label" ng-bind="label"></label>
    <ul class="list-reset" ng-class="{'co-select': !label, 'co-select-labeled': label}">
        <li ng-click="co.toggleSelect(this)" class="co-select-option clickable">
            <span ng-bind="co.getCurrentOption(this) || default"></span>
            <ul ng-show="co.isSelectToggled(this)" class="list-reset bg-light co-select-dropdown">
                <li ng-repeat="option in list" ng-if="option !== co.getCurrentOption(this)" 
                        ng-click="co.selectOption(this, option)" ng-bind="option" class="co-select-option"></li>
            </ul>
            <span class="co-select-icon">
                <i class="icon icon-keyboard-arrow-{{co.isSelectToggled(this) ? 'up' : 'down'}}"></i>
            </span>
        </li>
    </ul>
</div>

共同选择指令：

coForms.directive('coSelect', [function() {

    return {
        restrict: 'E',
        scope: {
            default: '=',
            list: '=',
            label: '@'
        },
        controller: 'CoFormsCtrl',
        controllerAs: 'co',
        templateUrl: 'app/views/components/co-forms/co-select.html',
        link: function(scope, element, attrs) {

        }
    };
}]);

控制器：

coForms.controller('CoFormsCtrl', [function() {

    var coForms = this;

    /* View functions */
    coForms.toggleSelect = function(select) {
        select.isToggled = !select.isToggled;
    };

    coForms.isSelectToggled = function(select) {
        return select.isToggled ? true : false;
    };

    coForms.selectOption = function(select, option) {
        select.currentOption = option;
        console.log(select);
    };

    coForms.getCurrentOption = function(select) {
        console.log(select);
        return select.currentOption;
    };
}]);

console.log中的coForms.getCurrentOption显示this为：

console.log内的coForms.selectOption显示this为：{/ p>

我如何使用此指令：

<co-select list="['option 1', 'option 2', 'option 3']" default="'option 1'"></co-select>

Answer 1

因为ng-repeat创建了一个新的范围（如果我正确，它扩展了父范围），你的selectOption在ng-repeat内调用，因此this表示该范围。

您不应该以这种方式使用控制器功能（将this作为参数传递）。你应该做一个变量＆＃34;选择＆＃34;在你的范围内并使用它。

这应该有效（见本文：http://plnkr.co/edit/Javqd1zoKbubHEUD2Ea9?p=preview）：

coForms.directive('coSelect', [function() {
    return {
        restrict: 'E',
        scope: {
            default: '=',
            list: '=',
            label: '@'
        },
        controller: 'CoFormsCtrl',
        controllerAs: 'co',
        templateUrl: 'app/views/components/co-forms/co-select.html',
        link: function(scope, element, attrs) {

        } 
    };
}]);

coForms.controller('CoFormsCtrl', ['$scope', function($scope) {

    var coFormsCtrl = this;
    coFormsCtrl.select={
      isToggled: true,
      currentOption:$scope.default
    };

    /* View functions */
    coFormsCtrl.toggleSelect = function() {
        coFormsCtrl.select.isToggled = !coFormsCtrl.select.isToggled;
    };

    coFormsCtrl.isSelectToggled = function() {
        return coFormsCtrl.select.isToggled ? true : false;
    };

    coFormsCtrl.selectOption = function(option) {
        coFormsCtrl.select.currentOption = option;
        console.log(coFormsCtrl.select);
    };

    coFormsCtrl.getCurrentOption = function() {
        console.log(coFormsCtrl.select);
        return coFormsCtrl.select.currentOption;
    };
}]);

模板：

<div class="co-select-form-control">
          <label class="co-inset-label" ng-bind="label"></label>
          <ul class="list-reset" ng-class="{'co-select': !label, 'co-select-labeled': label}">
              <li ng-click="co.toggleSelect()" class="co-select-option clickable">
                  <span ng-bind="co.getCurrentOption() || default"></span>
                  <ul ng-show="co.isSelectToggled()" class="list-reset bg-light co-select-dropdown">
                      <li ng-repeat="option in list" ng-if="option !== co.getCurrentOption()" 
                              ng-click="co.selectOption(option)" ng-bind="option" class="co-select-option"></li>
                  </ul>
                  <span class="co-select-icon">
                      <i class="icon icon-keyboard-arrow-{{co.isSelectToggled() ? 'up' : 'down'}}"></i>
                  </span>
              </li>
          </ul>
      </div>

为什么＆＃39;这个＆＃39;两种不同功能的不同东西？

1 个答案: