为什么“这”在两个不同的功能中有所不同？

Chrillewoodz

我有一个问题，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为：

我如何使用此指令：

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

错误的

那是因为ng-repeat创建了一个新的作用域（如果我是对的，它扩展了父作用域），则您的selectOption在ng-repeat内部被调用，因此this代表了该作用域。

您不应该以这种方式使用控制器功能（this作为参数传递）。您应该在范围内进行变量“选择”并使用它。

这应该可以工作（请参见以下代码：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。