Html templates not rendering toast

[hdcrewsr]

Hello I am new to this library and I am trying to figure out how to get the html to render within my application.

I have the toastr directive being registered within my main app as:

     'use strict';
    define(['services/routeResolver'], function() {
    var app = angular.module("app", ["ui.bootstrap", "ngAnimate", "ngRoute", "routeResolverServices", 'ngSanitize','toastr']);
....

then within the app module I registered the toastr directive (this was the only way I could get the directive to register in the controllers.

    //added toaster as factory so it can be injected into  controller
    angular.module("app").factory("foxToastr", function (toastr) {
        return {
            toastsuccess: function (msg) {
                toastr.success(msg);
            },
            toasterror: function (msg) {
                toastr.error(msg);
            },
            toastinfo: function (msg) {
                toastr.info(msg);
            },
            toastwarning: function (msg) {
                toastr.warning(msg);
            }
        }
    });
    return app;

Within my search controller I then registered the directive

'use strict';
define(['app'], function (app) {

    var injectParams = ['$filter', '$log', 'dataService', 'foxToastr'];

    var searchController = function ($filter, $log, dataService, foxToastr) {
        var vm = this;

and called the toastr function as

 vm.search = function () {
            var request = buildSearchRequest();
            if (vm.searchTerm == null) {
                foxToastr.toastwarning('Search term may not be blank', 'Attention', {
                    closeButton: true
                });
            } else if (vm.searchTerm.length < 3) {
                foxToastr.toastwarning('Search terms must contain more than 3 characters.', 'Attention', {
                    closeButton: true
                });
            } else {
                dataService.postSearchRequest(request).then(renderResults, onError);
            }
        };

What I would expect here is if validation fails the toastr element would load. The function executes no errors are thrown in the debug console and using the Chrome Dev tools I can see on the network tab where the toastr.html file is retrieved from the template directory. However nothing ever appears in the UI?

I am running Angular 1.4.7 along with angular-animate 1.4.7.

I noticed on another thread posted in August there was a potential issue with replace() and it being deprecated. I read the thread between you and the angular team as well. Could this possibly be related or is my unfamiliarity with this library have me using it incorrectly?

If I am using it incorrectly could you point me to a basic plunker/sample that shows the correct way to wire this up?

Thank you for any advice.

[Foxandxss]

I am confused with all this require.js code in here and the wrapper you did on toastr.

Are you using angular-toastr.tpls.js ? That is the one that includes the template built in.

[hdcrewsr]

Sorry I know the require stuff makes it wonky to read. That was one area I was not sure of. I did register the js files in the root of my html page.

    <script src="Scripts/angular/angular.min.js"></script>
    <script src="Scripts/angular/angular-route.min.js"></script>
    <script src="Scripts/angular/angular-animate.min.js"></script>
    <script src="Scripts/angular/angular-sanitize.min.js"></script>
    <script src="Scripts/angular-ui/ui-bootstrap-tpls-0.14.3.min.js"></script>
    <script src="Scripts/toastr/angular-toastr.min.js"></script>
    <script src="Scripts/toastr/toastr.tpl.js"></script>

And I did register the toastr.tpl.js file there. Where I got confused was I see the templateCache is set but when the code within angular-toast.js is fired the template that gets called is the physical template/toastr.html (which I copied from your demo page) and pasted into an html file that is saved in that directory.

Correction: I removed the wrapper within the module and now inject into the searchController just the toastr directive

    use strict';
    define(['app'], function (app) {
    var injectParams = ['$filter', '$log', 'dataService', 'toastr'];
    var searchController = function ($filter, $log, dataService, toastr) {

That cleans up the function call but I am still seeing the same results. of the html being referenced but not visible in the ui.

[Foxandxss]

Instead of those two last lines, you have to load angular-toastr.tpls.js.

Still, I don't really think that is your problem. I suspect that you have something weird with your module loading and require.js