嵌套控制器问题

Nested controller issue

本文关键字：问题 控制器 嵌套      更新时间：2023-09-26

我不知道我的标题是否很好地描述了我的问题，但我认为这就是这里发生的事情。我试图做的是将facebook登录添加到我的应用程序中，我使用了侧菜单离子模板，并遵循了教程离子facebook集成

它在浏览器和手机上都运行良好，没有问题，但当我试图不在模板配置文件中显示facebook数据配置文件图片时，在我的侧菜单顶部，我遇到了两个问题。

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

第二个问题我得到了这个警报Facebook error: undefined，它在profileCtrl 中

当我在menu template内部创建div并在此处放置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>

我用<div ng-controller="AppCtrl"包裹了侧面menu template，并做了这里解释的层次angular.js层次控制器指南，SURE我确实从这里删除了controller: 'AppCtrl'

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

但它没有起作用。

抱歉时间太长了。

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

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

尤其是在异步更改绑定时。

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

仅使用src，浏览器就会获取类似"http://graph.facebook.com/UNDEFINED/picture?width=100&height=100"，当值更改时，浏览器将不会检查这一点，也不会获取新图像。Angular会为您处理这一问题。我猜刷新时会满足某种竞争条件。尽管我不熟悉Facebook库的工作原理。

相关文章：