AngularJS - 未定义函数答案

【问题标题】：AngularJS - Function Not DefinedAngularJS - 未定义函数
【发布时间】：2016-12-12 20:01:06
【问题描述】：

使用下面的代码，我试图在 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

*/

【问题讨论】：

signInUser() 声明在哪里？如果它没有在PageCtrl 中定义，它将无法访问。
您的 showToast 函数存在（并且只能访问）在您的 PageCtrl 控制器中，我假设您的 signInUser 函数不在其中。
@Justin 没错。我不知道控制器内部的功能无法在该控制器之外访问。任何想法如何解决这个问题？我还将我的完整脚本添加到帖子中。谢谢。
@Sam 它不在 PageCtrl 中。我不知道控制器内部的功能无法在该控制器之外访问。任何想法如何解决这个问题？我还将我的完整脚本添加到帖子中。谢谢。
一团糟！访问控制器内部的 dom！应该将此电子邮件/密码绑定到 $scope

标签： javascript angularjs firebase

【解决方案1】：

你可以这样做：

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;

【讨论】：

【解决方案2】：

首先将函数放到控制器的作用域上，这样就可以访问了

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

然后在您的“signInUser()”函数中使用以下代码调用控制器，其中“#pageCtrlID”是赋予控制器标签的 ID。

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

这太老套了，如果你有时间，我强烈建议你考虑构建你的页面以遵循更 Angular 的设计（即没有 DOM 操作）。

【讨论】：