控制器的变量值未在 Angularjs 材料 Toast 模板中更新答案

【问题标题】：Controller's variable value isn't updated in Angularjs material Toast template控制器的变量值未在 Angularjs 材料 Toast 模板中更新
【发布时间】：2018-04-17 17:40:29
【问题描述】：

我正在尝试在一个简单的 Angularjs 应用程序中使用 AngularJS Material 的“toast”组件。

文档非常模糊，甚至没有遵循自己的规则（例如，必须使用“md-actions”类作为操作按钮）。总之，问题如下：

我使用以下配置为我的 toast 创建了一个“预设”：

$mdToastProvider.addPreset('docEditPreset', {
            options: function () {
                return {
                    templateUrl: 'App/Components/Document_Edit/DocumentEditToast.html',
                    hideDelay: 1200,
                    position: 'bottom right',
                    toastClass: 'document-edit-toast',
                    controller: 'DocumentEditController',
                    controllerAs: 'vm'
                };
            }
        });

吐司的模板是：

<md-toast>

    <span class="md-toast-text">{{ vm.toastText }}</span>

</md-toast>

如上面的代码所示，我在模板的<span> 标记内有一个名为vm.toastText 的变量，该变量位于DocumentEditController 中，并且应该在toast 中可见。

DocumentEditController的代码：

vm.toastText = '';

function showToast() {
            vm.toastText = 'I AM A TOAST!';
            $mdToast.show(
                $mdToast.docEditPreset()
            );
        }

（我应该提到vm 是控制器的$scope。为了保持一致性，toast 配置也被命名为相同。）

所以想法是在运行 toast 函数之前更改vm.toastText 的值。我希望在我的 toast 模板中获得更新的值。目前，toast 似乎只显示了vm.toastText 的初始值，它是一个空字符串。

如何更新 DocumentEditController 中的变量值并在 toast 模板中使用它？

Demo 在 CodePen 上

【问题讨论】：

每次调用$mdToast.show()时可能会创建一个新的控制器实例。可以使用$mdToast服务的textContent(string)方法
在 plunker（或其他沙箱）中创建一个可运行的演示，展示您如何使用 toast
@charlietfl 感谢您的评论。我将尝试使用新的控制器实例来看看会发生什么。这是让事情更清晰的演示：codepen.io/DreamWalker/pen/aYgazy
正确。不使用服务
呃，我明白了。所以它创建了一个带有初始值的“TestController”的副本？如果是这样，我是否能够将原始控制器中的值链接到副本？

标签： javascript angularjs angularjs-material

【解决方案1】：

对于那些难以解决此类问题的人，我找到了一种解决方法。

我没有使用我的主控制器（在我的问题中为DocumentEditController），而是创建了一个新控制器，例如ToastController，然后使用locals 传递我需要的变量。

所以DocumentEditController中的函数变成了：

function showToast(message) {
            $mdToast.show({
                templateUrl: 'App/Components/Shared/Toast/ToastTemplate.html',
                hideDelay: 1200,
                position: 'bottom right',
                controller: 'ToastController',
                controllerAs: 'vm',
                locals: {
                    message: message
                }
            });
        }

和ToastController:

function ToastController($scope, $mdToast, message) {

        var vm = this;

        //=== Variables ===//
        vm.message = message;

        //=== Function declarations ===//
        vm.closeToast = closeToast;

        //=== Function implementations ===//

        function closeToast() {
            $mdToast.hide();
        }

    }

ToastController.$inject = ['$scope', '$mdToast', 'message'];

HTML 模板：

<md-toast>

    <span class="md-toast-text">{{ vm.message }}</span>

    <md-button ng-click="vm.closeToast()" class="md-action md-icon-button">
        <md-icon class="md-light">close</md-icon>
    </md-button>

</md-toast>

我完全删除了我试图在我的应用配置中创建的预设，而是在我的主控制器中声明了 toast (DocumentEditController)。

现在在我的主控制器中，我可以简单地调用带有所需消息的showToast(message) 函数 - 无论是字符串还是包含字符串的变量。

【讨论】：