導致AngularJS的角度材質mdToast無限$摘要循環

我有一個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通知出現，但我不能解僱敬酒。此外，錯誤控制檯報告無限$摘要循環。根據我的理解，Angular使用$ watch來根據對模型的更改不斷更新頁面。因此，我不知道爲什麼我會與烤麪包一起進入無限循環，因爲我有單獨的烤麪包，我會展示它，並且永遠不要再嘗試改變它。還有什麼我失蹤的？

如果我不應該在這裏使用綁定，那麼更好的解決方案是什麼？我也將擴展這個問題，包括使用綁定調用一個函數來設置頁面上的元素的文本是正確的，就像你用setToolbarTitle看到的那樣？如果沒有，我將不勝感激正確的風格和慣例的指導。

來源

2015-11-24 Nick Alexander

這樣做

{{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!"); 

}]);

來源

2015-11-24 15:47:15

問題是我需要吐司基於一個ruby變量有條件地打開。你知道我怎麼能做到這一點？ –

導致AngularJS的角度材質mdToast無限$摘要循環

回答

相關問題