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值，尽管如果我在创建它时调试它，它已设置默认值{{ 1}}价值。它不能与一次性绑定（Actions）和正常情况一起工作。也许它是来自指令代码的::的东西，但我无法弄清楚，我希望得到你的帮助 - 谢谢你提前。 P.S。我尝试从控制器返回scope: {}变量 - 它没有帮助。的 P.S。 2 如果指定viewModel（actionsText）

，则效果很好

Answer 1

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

只要有controllerAs，bindToController＆amp;具有@角度的范围以不同的方式处理此事物。

实际上，当您使用@＆amp ;;在隔离范围内的范围变量上使用controllerAs时bindToController angular使用$observe对attribute值$timeout上的表达式angular code for same

进行了观察

解决方案将使用@来执行将使用$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(); }; };表达式被评估之后，值会在下一个摘要周期循环中被绑定。

<强>代码

for ((i=0; i<${#list[@]}; i++)); do
    #...
    if (( s1 > 0 )); then
        list+=( "$id2" )
    fi
done

这是detailed version answer

Angular：带有bindToController的指令＆＃39;失败＆＃39;数据

1 个答案: