Angular：带有 bindToController 'loses' 数据的指令

Question

我有 actionButtons 指令：

function actionButtons(){
    'use strict';
    return {
        scope: {},
        restrict: 'AE',
        bindToController: {
            itemId: '@',
            itemDescription: '@',
            actionsText: '@',
            previewAction: '&',
            previewText: '@',
            editAction: '&',
            editText: '@',
            removeAction: '&',
            removeText: '@'
        },
        controller: ActionButtonsController,
        controllerAs: 'actionButtonsCtrl',
        templateUrl: 'src/views/directives/actionButtons.html'
    };
}

使用 ActionButtonsController 控制器：

/**
 *
 * @constructor
 */
function ActionButtonsController() {
    'use strict';
    var viewModel = this;
    //not important assertions
    }
    /**
     *
     * @type {boolean}
     */
    viewModel.hasItemDescription = typeof viewModel.itemDescription === 'string' &&
        viewModel.itemDescription.length > 0;
    /**
     *
     * @type {string}
     */
    viewModel.previewText = viewModel.previewText || 'preview';
    /**
     *
     * @type {string}
     */
    viewModel.editText = viewModel.editText || 'edit';
    /**
     *
     * @type {string}
     */
    viewModel.removeText = viewModel.removeText || 'remove';
    /**
     *
     * @type {string}
     */
    viewModel.actionsText = viewModel.actionsText || 'Actions';

    viewModel.preview = function() {
        viewModel.previewAction();
    };

    viewModel.edit = function() {
        viewModel.editAction();
    };

    viewModel.remove = function() {
        viewModel.removeAction();
    };
}

他的模板的一部分，带有按钮：

<div class="visible-xs-block btn-group" data-dropdown>
<button class="btn btn-block btn-primary" id="{{::(actionButtonsCtrl.itemId)}}" type="button"
        data-dropdown-toggle aria-haspopup="true">
    {{actionButtonsCtrl.actionsText}} <span class="sr-only" data-ng-if="::actionButtonsCtrl.hasItemDescription">
        for {{::(actionButtonsCtrl.itemDescription)}}</span></button>
</div>

这就是我在应用程序中的称呼：

<td class="col-md-3 col-xs-3 text-center">
    <div data-action-buttons
         data-item-id="{{author.id + '_' + author.name + '_' + author.surname}}"
         data-item-description="{{author.name + ' ' + author.surname}}"
         data-preview-action="authorCtrl.preview(author)"
         data-edit-action="authorCtrl.edit(author)"
         data-remove-action="authorCtrl.remove(author)"
        ></div>
</td>

问题是：正如您从控制器代码中看到的，例如 actionsText 不是必需的，如果不存在，它将被设置为 Actions。 itemDescription 也不是必需的。但是如果我指定 itemDescription 它总是在 HTML DOM 中可见，但是 Actions 对我来说表现得很奇怪：它被设置为默认值 Actions，但在 HTML DOM 中不可见。这两者之间的区别在于 actionsText 在控制器的代码显式中绑定到 this - 但我认为这是 bindToController 的默认行为，这是我想设置时应该做的值不存在时的默认值。此外，当我调试它时（例如通过调用其中一个函数），actionsText 具有 undefined 值，尽管事实上如果我在创建它时对其进行调试，它已设置默认值 Actions 值。它不适用于一次性绑定（::）和正常情况。也许这是指令代码中 scope: {} 的问题，但我无法弄清楚，我希望得到你的帮助 - 提前谢谢你。 P.S. 我尝试了 return viewModel 来自控制器的变量 - 它没有帮助。 P.S。 2 如果指定 actionsText 则效果很好（如 data-actions-text={{'Something'}}）

Answer 1

您正在使用 bindToController 间接将范围值添加到控制器 this 上下文。但是这个问题正在发生，因为您在 bindToController 表达式中使用了 @ 符号。

只要有 controllerAs、bindToController 和范围 @ 的情况，angular 就会以截然不同的方式处理这件事。

实际上，当您使用 @ 在隔离范围内的范围变量上使用 controllerAs & bindToController angular 在给定的表达式上使用 $observe 放置一个手表在那个 attribute 值上，angular code for same

该解决方案将使用 $timeout 来完成所有将使用独立范围值的 @ 获取的分配。因为在计算 $observe 表达式后，值会在下一个摘要循环周期中绑定。

代码

function ActionButtonsController() {
    'use strict';
    var viewModel = this;
    $timeout(function() {
        viewModel.hasItemDescription = typeof viewModel.itemDescription === 'string' &&
            viewModel.itemDescription.length > 0;

        viewModel.previewText = viewModel.previewText || 'preview';

        viewModel.editText = viewModel.editText || 'edit';

        viewModel.removeText = viewModel.removeText || 'remove';

        viewModel.actionsText = viewModel.actionsText || 'Actions';
    })

    viewModel.preview = function() {
        viewModel.previewAction();
    };

    viewModel.edit = function() {
        viewModel.editAction();
    };

    viewModel.remove = function() {
        viewModel.removeAction();
    };
};

这是

Angular：带有 bindToController 'loses' 数据的指令

Angular: directive with bindToController 'loses' data

javascript

angularjs

angularjs-directive

angularjs-controller

angularjs-controlleras