Question

我不知道我的头衔是否能很好地描述我的问题但是，这就是我认为在这里发生的事情。我想要做的是将facebook登录添加到我的应用程序，我使用sidemenu离子模板，我按照教程ionic facebook integration

它在浏览器和移动设备上都没有问题但是，当我试图显示不在模板配置文件中的Facebook数据配置文件图片时，但是在我的旁边菜单的顶部我有两个问题。

首先我需要刷新浏览器，以便显示图片。

第二个问题我收到Facebook error: undefined

中的此警告profileCtrl

我在div内部创建menu template并在此ng-controller="profileCtrl"坐下时收到此错误我觉得应用程序发生冲突，因为APPCtrl是控制器menu Template就像这样：

templateUrl: "templates/menu.html",
controller: 'AppCtrl'

这是我添加到菜单模板中的代码，用于在侧边菜单的顶部显示图片和用户名：

<div ng-controller="ProfileCtrl" class="user-pro">

        <img src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
        <p class="text-center user-name side-btn">{{user.name}}</p>

 </div>

这里是menu template代码以及我如何将代码放入其中：

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <ion-content class="has-header side-bg"><!-- sidebar -->
            <!-- user profile here -->
     <div ng-controller="ProfileCtrl" class="user-pro">
        <img src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
        <p class="text-center user-name side-btn">{{user.name}}</p>
     </div><!-- user Profile -->
     <ion-list>
      <ion-item>
      </ion-item>
     </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

我将menu template一边用<div ng-controller="AppCtrl"包裹，然后执行此处解释的层次angular.js hierarchy controller guide，我确实从此处删除了controller: 'AppCtrl'

.state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

但它确实无效。

抱歉很久。

Answer 1

我不确定我能回答你的所有问题。即Facebook未定义错误。但是我可以修复你的照片没有显示。

在图像标记的src属性中使用绑定时，应使用ng-src。

特别是当异步更改绑定时。

    <img ng-src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>

仅使用src浏览器会获得类似＆＃34; http://graph.facebook.com/UNDEFINED/picture?width=100&height=100＆＃34;当值发生变化时，浏览器不会检查该值并且无法获取新图像。 Angular会为您解决这个问题。我猜测刷新有某种竞争条件得到满足。虽然我不熟悉Facebook图书馆的运作方式。

嵌套控制器问题

1 个答案: