Angularjs material Toast 模板中未更新控制器的变量值

Question

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

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

我使用以下配置为我的 toast 创建了一个 'Preset'：

$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 并且应该在吐司中可见。

DocumentEditController的代码：

vm.toastText = '';

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

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

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

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

Demo 在 CodePen

Answer 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>

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

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

Angularjs material Toast 模板中未更新控制器的变量值

Controller's variable value isn't updated in Angularjs material Toast template

javascript

angularjs

angularjs-material