个人中心
gpt4 book ai didi

javascript - Angular Material mdToast 导致 AngularJS 无限 $digest 循环

转载 作者：行者123 更新时间：2023-12-03 08:17:15 26 4
gpt4 key购买 nike

我有一个 Ruby on Rails Web 应用程序，我正在用 AngularJS 和 Angular Material 对其进行补充。我正在尝试使用绑定(bind)在网页上显示 Angular Material toast 通知(这可能是问题所在)。这是我第一次使用 AngularJS，所以我对其内部工作原理和最佳实践的了解有限。如果你愿意的话，一场火的审判。

下面是我的 Angular 模块和 Controller 的 JavaScript 代码以及出现问题的 HTML。

JavaScript

var app = angular.module('VisualLearning', [
    "ngAnimate",
    "ngMaterial",
    "ngMdIcons"
  ]);


app.controller("BodyController", ["$scope", "$mdSidenav", "$mdToast", function ($scope, $mdSidenav, $mdToast) {

    $scope.toggleSidenav = function (menuID) {
        $mdSidenav(menuID).toggle();
    };

    $scope.setToolbarTitle = function(title) {
        $('#toolbarTitle').html(title);
    };

    $scope.openToast = function(toastText) {
        var toast = $mdToast.simple().content(toastText).position("top right")
        $mdToast.show(toast);
    }

}]);

HTML

<body id="body" layout="row" ng-controller="BodyController">
  <% if session[:notify] %>
    {{openToast("This is a Test Toast!")}}
  <% session[:notify] = false %>
  <% end %>

  {{setToolbarTitle("Where To Next?")}}

  <md-content flex md-scroll-y>
    <ui-view layout="column">
      <div id="buttonContainer">

        <div class="buttons">

          <%= link_to :controller => :staff_users, :action => :show, :id => @current_user.id do %>
              <button class="button buttonBlue">My Account
                <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
              </button>
          <% end %>

          <%= link_to :controller => :session, :action => :logout do %>
              <button class="button buttonBlue">Log Out
                <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
              </button>
          <% end %>

        </div>
      </div>
    </ui-view>
  </md-content>
</body>

出现我的 Toast 通知，但我无法关闭该 Toast。此外，错误控制台报告无限 $digest 循环。据我了解，Angular 使用 $watch 根据模型的更改不断更新页面。有了这个，我不确定为什么我会遇到 toast 的无限循环，因为我有一个 toast ，我显示它，并且不再尝试更改它。我还有什么遗漏的吗？

如果我不应该在这里使用绑定(bind)，更好的解决方案是什么？我还将扩展这个问题，以包括使用绑定(bind)调用函数来设置页面上元素的文本(如您使用 setToolbarTitle 看到的那样)是否正确？如果没有，我将不胜感激有关正确风格和惯例的指导。

最佳答案

通过做

{{openToast("This is a Test Toast!")}}

在您的模板中，您要求 Angular 观察方法调用的执行返回，并在每个摘要周期对其进行评估。这是你基本上永远不想做的事情。

显示 Toast 的正确方法就是从 Controller 调用 if 。 

app.controller("BodyController", ["$scope", "$mdSidenav", "$mdToast", function ($scope, $mdSidenav, $mdToast) {

    $scope.toggleSidenav = function (menuID) {
        $mdSidenav(menuID).toggle();
    };

    $scope.setToolbarTitle = function(title) {
        $('#toolbarTitle').html(title);
    };

    $scope.openToast = function(toastText) {
        var toast = $mdToast.simple().content(toastText).position("top right")
        $mdToast.show(toast);
    }

    $scope.openToast("This is a Test Toast!");

}]);

关于javascript - Angular Material mdToast 导致 AngularJS 无限 $digest 循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33885010/

26 4 0
文章推荐： javascript - NodeJS/Angular 无法删除对象
文章推荐： javascript - 在 Javascript 中使用枚举来表示月份编号和名称
文章推荐： javascript - 服务器端生成 RSS 时出错 - 向用户/RSS 阅读器返回什么？
文章推荐： javascript - Node 文件传输在图像目录中上传 x 字节的图像，但已损坏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com