AngularJS - Funktion nicht definiert

Question

Mit dem untenstehenden Code versuche ich einen Toast mit AngularJS innerhalb einer Firebase-Funktion anzuzeigen. Die Funktion ist showToast(), aber ich bekomme eine Funktion nicht definiert Fehler. Jede Hilfe wäre willkommen, danke!

Funktion:

app.controller('PageCtrl', function($scope, $mdToast, $document) { 
    function showToast() { 
    $mdToast.show(
     $mdToast.simple() 
     .textContent('Simple lala Toast!') 
     .hideDelay(3000) 
    ); 
    }; 
}); 

Versuch Funktion aufzurufen:

function signInUser(email, password) { 
    var email = document.getElementById('email-input').value; 
    var password = document.getElementById('password-input').value; 

    auth.signInWithEmailAndPassword(email, password).then(function(value) { 
    // REDIRECT TO THE HOME PAGE AFTER LOGIN 
    //window.location = "#/home"; 
    //location.reload(); 

    showToast(); 

    }).catch(function(error) { 
    var errorCode = error.code; 
    var errorMessage = error.message; 

    if (errorCode == 'auth/invalid-email') { 
     alert('That user does not exist.'); 
    } else { 
     alert(errorMessage); 
    } 
    console.log(error); 
    }); 
} 

Voll Script:

/* 

INITIALIZATION 

*/ 

// FIREBASE CONFIGURATION 
var config = { 
    apiKey: "AIzaSyA2_fVDRCKhCJ5QueXY-Xb2CxFFuxY-rdU", 
    authDomain: "user-database-d1a70.firebaseapp.com", 
    databaseURL: "https://user-database-d1a70.firebaseio.com", 
    storageBucket: "user-database-d1a70.appspot.com", 
    messagingSenderId: "528331985076" 
}; 

// INITIALIZE FIREBASE 
firebase.initializeApp(config); 
var database = firebase.database(); 
var auth = firebase.auth(); 

// ANGULARJS APPLICATION 
var app = angular.module('FirebaseTest', [ 
    'ngRoute', 'ngMaterial', 'ngMessages' 
]); 

/* 

ROUTES 

*/ 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when("/home", {templateUrl: "partials/home.html", controller: "PageCtrl"}) 
    .when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"}) 
    .when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"}) 
    .when("/nutrition", {templateUrl: "partials/nutrition.html", controller: "PageCtrl"}) 
    .when("/login", {templateUrl: "partials/login.html", controller: "PageCtrl"}) 
    .when("/register", {templateUrl: "partials/register.html", controller: "PageCtrl"}) 
    .otherwise({redirectTo:"/home", template: "partials/home.html", controller: "PageCtrl"}); 
}]); 

/* 

CONTROLLERS 

*/ 

app.controller('PageCtrl', function($scope) { 

}); 

app.controller('NavCtrl', function($scope) { 
    var url = document.URL; 
    var array = url.split('/'); 
    var pathname = array[array.length-1]; 

    console.log("Pathname: "+pathname); 
    $scope.currentNavItem = pathname; 
}); 

app.controller('NutritionCtrl', function($scope) { 
    $scope.user = { 
    gender: 'Female', 
    goal: 'Lose Weight' 
    }; 

    $scope.genders = ('Male Female').split(' ').map(function(gender) { 
    return {abbrev: gender}; 
    }); 
    $scope.goals = ('Lose Weight_Gain Weight').split('_').map(function(goal) { 
    return {abbrev: goal}; 
    }); 
}); 

app.controller('PageCtrl', function($scope, $mdToast, $document) { 
    function showToast() { 
    $mdToast.show(
     $mdToast.simple() 
     .textContent('Simple lala Toast!') 
     .hideDelay(3000) 
    ); 
    }; 
}); 

/* 

METHODS 

*/ 

// FIREBASE CREATE USER METHOD 
function writeUserData(email, password) { 
    auth.createUserWithEmailAndPassword(email, password) 
    .then(function() { 

    }) 
    .catch(function(error) { 
    var errorCode = error.code; 
    var errorMessage = error.message; 

    if (errorCode == 'auth/weak-password') { 
     alert('The password is too weak.'); 
    } else { 
     alert(errorMessage); 
    } 
    console.log(error); 
    }); 
} 

// FIREBASE SIGN IN USER METHOD 
function signInUser(email, password) { 
    var email = document.getElementById('email-input').value; 
    var password = document.getElementById('password-input').value; 

    auth.signInWithEmailAndPassword(email, password).then(function(value) { 
    // REDIRECT TO THE HOME PAGE AFTER LOGIN 
    //window.location = "#/home"; 
    //location.reload(); 

    showToast(); 

    }).catch(function(error) { 
    var errorCode = error.code; 
    var errorMessage = error.message; 

    if (errorCode == 'auth/invalid-email') { 
     alert('That user does not exist.'); 
    } else { 
     alert(errorMessage); 
    } 
    console.log(error); 
    }); 
} 

// FIREBASE SIGN OUT USER METHID 
function signOutUser() { 
    auth.signOut().then(function() { 
    // REDIRECT TO THE HOME PAGE AFTER LOGOUT 
    window.location = "#/home"; 
    location.reload(); 
    }, function(error) { 
    // Errors go here. 
    }); 
} 

// FIREBASE AUTH STATE CHANGE METHOD 
auth.onAuthStateChanged(function(user) { 
    // NAVIGATION LINKS 
    var nutritionLink = document.getElementById('nav-nutrition'); 

    // USER INFORMATION 
    var user = firebase.auth().currentUser; 

    if (user) { 
    email = user.email; 
    uid = user.uid; 

    // HIDE/SHOW LINKS 
    $(nutritionLink).show(); 

    // UPDATE HEADER TEXT WITH USER EMAIL 
    document.getElementById('header-username').innerHTML="Logged in as " + email + " - <a href='#' onclick='return signOutUser(this);'>Sign Out</a>"; 

    console.log("Provider-specific UID: "+uid); 
    console.log("Email: "+email); 
    } else { 

    // HIDE/SHOW LINKS 
    $(nutritionLink).hide(); 

    // UPDATE HEADER TEXT WITH USER EMAIL 
    document.getElementById('header-username').innerHTML="<a href='#/login'>Login/Register</a>"; 
    } 
}); 

/* 

FUNCTIONS 

*/ 

Answer 1

Man könnte es wie folgt tun:

JS

app.controller('PageCtrl', function($scope, $mdToast, $document) { 
    function showToast() { 
    $mdToast.show(
     $mdToast.simple() 
     .textContent('Simple lala Toast!') 
     .hideDelay(3000) 
    ); 
    }; 

    // FIREBASE SIGN IN USER METHOD 
    $scope.signInUser = function() { 
    var email = document.getElementById('email-input').value; 
    var password = document.getElementById('password-input').value; 

    auth.signInWithEmailAndPassword(email, password).then(function(value) { 
     // REDIRECT TO THE HOME PAGE AFTER LOGIN 
     //window.location = "#/home"; 
     //location.reload(); 

     showToast(); 

    }).catch(function(error) { 
     var errorCode = error.code; 
     var errorMessage = error.message; 

     if (errorCode == 'auth/invalid-email') { 
     alert('That user does not exist.'); 
     } else { 
     alert(errorMessage); 
     } 
     console.log(error); 
    }); 
    } 
}); 

Markup

<buttton ng-click="signInUser()">Sign In</button> 

Sie brauchen nicht in E-Mail und das Passwort weitergeben, wie Sie sie in der Funktion bekommen.

Edit: Sie sollten Ihren gesamten Ansatz überdenken, da Sie AngularJS nicht auf die beste Weise verwenden. Zum Beispiel etwas tun, wie folgt aus:

<input type="email" ng-model="email"> 

und in Ihrem Controller Verwendung $scope.email statt

var email = document.getElementById('email-input').value; 

Answer 2

Erster Platz die Funktion auf den Umfang des Controllers, so dass es zugänglich ist

app.controller('PageCtrl', function($scope, $mdToast, $document) { 
    $scope.showToast = function() { 
     $mdToast.show(
      $mdToast.simple() 
      .textContent('Simple lala Toast!') 
      .hideDelay(3000) 
     ); 
    }; 
}); 

Dann rufen Sie in der Funktion 'signInUser()' den Controller mit dem folgenden Code auf: '#pageCtrlID' ist die ID, die dem Controller-Tag zugewiesen wurde.

angular.element($('#pageCtrlID')).scope().showToast(); 

Dies ist hackish und ich empfehle, dass Sie Ihre Seite aussehen in der Strukturierung einem Angular Design (dh keine DOM-Manipulation), wenn Sie die Zeit haben, zu folgen.