Angularjs에서 토스터 메시지를 표시하는 방법은 무엇입니까?

안녕하세요 저는 Angularjs 응용 프로그램을 개발 중입니다. 각도 컨트롤러에 Toaster 메시지를 표시하려고합니다. 나는 http://angular-js.in/angular-toastr/을 심판했다. 나는 아래의 문제에 직면하고있다. 나는 성공, 정보 등 컨트롤러에서 통보를 호출 할 수 없습니다 그리고 내가 annot 읽고 속성 '성공'정의되지 않은 오류가 발생했습니다. 나는 아래와 같이 시도했다.Angularjs에서 토스터 메시지를 표시하는 방법은 무엇입니까?

index.html에서 아래 코드를 추가했습니다.

<!--Toaster--> 
    <script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script> 
    <link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" /> 
    <!--Toaster-->

이 내 main.js

내가 여기에 문제를 직면하고 이유를 알 수

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']); 
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) { 
//ui-routing states here}); 

app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate, toastr) { 
    toastr.success('Hello world!', 'Toastr fun!'); 
    $scope.clickHandler = function (key) { 

     $translate.use(key); 
    }; 
}]);

입니까? 어떤 도움을 주시면 감사하겠습니다. 감사합니다.

출처

2017-04-11 Niranjan Godbole

toastr을 컨트롤러에 문자열 종속성으로 추가하십시오.

변경이

app.controller('RoslpAppController', ['$scope', '$translate','toastr',function ($scope, $translate, toastr) {

출처

2017-04-11 04:27:30

저는 Ui 라우팅을 사용하고 있습니다. 매번 부모 컨트롤러에서 토스터를 의존성으로 전달해야합니까? - –

부모 컨트롤러 내부에 토스터를 사용하려면 의존성으로 전달해야합니다. –

컨트롤러 정의에 toastr이 누락되었습니다.

app.controller('RoslpAppController', ['$scope', '$translate','toastr', function ($scope, $translate, toastr) {

출처

2017-04-11 04:26:24

이 근무보십시오. 고마워 .... –

내가 할 때마다 내가 종속성으로 부모 컨트롤러에 토스터를 전달해야합니까 라우팅을 사용하고 있습니까? –

토스터를 사용하고있는 컨트롤러의 패스 토스터가 필요합니다. –

이

app.controller('RoslpAppController', ['$scope', '$translate',function ($scope, $translate, toastr) {

이

<html> 
 
<head> 
 
\t <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
\t <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script> 
 
\t <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css"> 
 

 
\t <script> 
 
\t \t var app=angular.module("myapp", []); 
 
\t \t app.controller("namesctrl", function($scope){ 
 

 
\t \t \t $(function() { 
 
\t \t \t \t $('#error').click(function() { 
 
     // make it not dissappear 
 
     toastr.error("Noooo oo oo ooooo!!!", "Title", { 
 
     \t "timeOut": "0", 
 
     \t "extendedTImeout": "0" 
 
     }); 
 
    }); 
 
\t \t \t \t $('#info').click(function() { 
 
    \t \t // title is optional 
 
    \t \t toastr.info("Info Message", "Title"); 
 
    \t }); 
 
\t \t \t \t $('#warning').click(function() { 
 
\t \t \t \t \t toastr.warning("Warning"); 
 
\t \t \t \t }); 
 
\t \t \t \t $('#success').click(function() { 
 
\t \t \t \t \t toastr.success("YYEESSSSSSS"); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 

 

 
\t \t }); 
 

 
\t \t 
 
\t </script> 
 
</head> 
 
<body ng-app="myapp" ng-controller="namesctrl"> 
 
\t <input type="button" value="Error" id="error" /> 
 
\t <input type="button" value="Info" id="info" /> 
 
\t <input type="button" value="Warning" id="warning" /> 
 
\t <input type="button" value="Success" id="success" /> 
 
\t <br><br><br><br> 
 
\t See official example: <a href='http://codeseven.github.io/toastr/demo.html' target='blank'>Here</a> 
 
</body> 
 
</html>

출처

2017-04-11 04:32:35

Angularjs에서 토스터 메시지를 표시하는 방법은 무엇입니까?

답변

관련 문제