Angular Material mdToast 导致 AngularJS 无限 $digest 循环答案

【问题标题】：Angular Material mdToast causing AngularJS Infinite $digest LoopAngular Material mdToast 导致 AngularJS 无限 $digest 循环
【发布时间】：2015-11-24 03:36:36
【问题描述】：

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

下面是我的 Angular 模块和控制器的 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 来根据模型的更改不断更新页面。有了这个，我不确定为什么我会在吐司上陷入无限循环，因为我有一个吐司，我显示它，再也不会尝试更改它。我还有什么遗漏的吗？

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

【问题讨论】：

标签： javascript html ruby-on-rails angularjs angular-material

【解决方案1】：

通过做

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

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

显示吐司的正确方法是从控制器调用 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!");

}]);

【讨论】：

问题是我需要根据 ruby 变量有条件地打开 toast。你知道我是怎么做到的吗？