Question

使用下面的代码，我试图在Firebase函数中显示AngularJS的祝酒词。函数是showToast()但是我得到的函数没有定义错误。任何帮助将不胜感激，谢谢！

功能：

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

尝试调用函数：

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);
  });
}

完整脚本：

/*

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

你可以这样做：

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);
    });
  }
});

标记

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

当您在功能中获取电子邮件和密码时，您不需要传递电子邮件和密码。

编辑：您应该重新考虑整个方法，因为您没有以最佳方式使用AngularJS。例如，做这样的事情：

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

并在您的控制器中使用$scope.email而不是

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

Answer 2

首先将函数放在控制器的范围内，以便可以访问

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

然后在你的＆＃39; signInUser（）＆＃39;函数使用以下代码调用控制器，其中＆＃39; #pageCtrlID＆＃39;是给予控制器标签的id。

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

这是hackish，我强烈建议您考虑构建您的页面以遵循更多Angular设计（即没有DOM操作），如果您有时间。

AngularJS - 功能未定义

2 个答案: