Angular Material mdToast, вызывающий AngularJS Бесконечный $ digest Loop

Question

Angular Material mdToast, вызывающий AngularJS Бесконечный $ digest Loop

0

У меня есть веб-приложение Ruby on Rails, которое дополняет AngularJS и Angular Material. Я пытаюсь отобразить уведомление тоста с угловым материалом на веб-странице, используя привязку (это может быть проблема). Это мой первый опыт работы с AngularJS, поэтому у меня есть ограниченное понимание внутренней работы и лучших практик. Если вы это сделаете, пожар будет испытан.

Ниже приведен код JavaScript для моего модуля и контроллера Angular, а также 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>

Появляется уведомление о тостере, но я не могу отказаться от тоста. Кроме того, консоль ошибок сообщает о бесконечном цикле $ digest. По моему мнению, Angular использует $ watch для постоянного обновления страницы на основе изменений в модели. С этим я не уверен, почему я бегу в бесконечный цикл с тостом, так как у меня был единственный тост, я его показываю и никогда не пытаюсь изменить его снова. Есть ли что-то еще, что мне не хватает?

Если я не буду использовать привязку здесь, каково будет лучшее решение? Я также буду расширять этот вопрос, чтобы включить в него правильное использование привязки для вызова функции для установки текста элемента на странице, как вы видите, с помощью setToolbarTitle? Если нет, я был бы признателен за руководство для правильного стиля и согласия.

Nick Alexander 24 нояб. 2015, в 05:15

Теги:

html

angular-material

1 ответ

Ещё вопросы

Pierre Gayvallet · Answer 1 · 2015-11-24T13-18-00.000Z

При выполнении

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

В своем шаблоне вы запрашиваете угловое наблюдение за возвратом вызова вызова метода, оценивая его в каждом цикле дайджеста. Это то, чего вы в принципе никогда не хотите делать.

Правильный способ показать ваш тост просто будет звонить, если от вашего контроллера.

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. Вы знаете, как я мог это сделать?