Angularjs Facebook Login: Cannot read property

2019-06-14 16:22发布

站内文章 / JavaScript

54 0

神经病院院长

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using angular-facebook module for adding Facebook Login capability to my application.

Generally I get the following error while loading the page:

The "fb-root" div has not been created, auto-creating Cannot read property 'appendChild' of null

When I get this error the facebook login popup comes empty/blank or unable to login.

My angular module dependencies are below:

angular.module('myApp', ['ngResource', 'ngRoute', 'facebook', 'restangular', 'LocalStorageModule'])

My index.html:

<html>
  <head>
    ..
    ..
     <script src="index.js"></script>
    <script src="assets/js/default.js"></script>
</head>
<body ng-view>
</body>

</html>

回答1:

The problem occurs because of ng-view tag in <body> ngRoute organizes the content of body itself but facebook js sdk tries to control 'fb-root' div under body.

The solution is to move ng-view to an inner div under body and create a fb-root div optionally:

<html>
  <head>
     <script src="index.js"></script>
    <script src="assets/js/default.js"></script>
</head>
  <body>
  <div id="fb-root"></div>
  <div ng-view>
  </div>
</body>
</html>