Question

我有一个小问题：在我的主页中，我发布了一个带有图像的NG重复。当我想在一个帖子中点击时，我有这个错误：

TypeError: Cannot read property 'facebook' of undefined
    at new <anonymous> (app.js:234)
    at invoke (ionic.bundle.js:12877)
    at Object.instantiate (ionic.bundle.js:12885)
    at ionic.bundle.js:17154
    at IonicModule.controller.self.appendViewElement (ionic.bundle.js:48176)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (ionic.bundle.js:46392)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (ionic.bundle.js:46312)
    at IonicModule.controller.self.render (ionic.bundle.js:48050)
    at IonicModule.controller.self.register (ionic.bundle.js:48008)
    at updateView (ionic.bundle.js:53315)

和

GET http://127.0.0.1:8103/%7B%7BauthData.facebook.cachedUserProfile.picture.data.url%7D%7D 404 (Not Found)

这是我的HTML：

<div ng-repeat="(id,post) in posts">

    <div class="card" ui-sref="tabpost({ postname: post.nameid, postdescription: post.descriptionid, postdate: post.startdateid, posthour: post.starthourid, postprice: post.priceid, postnbguest: post.nbguestid, postpicture: post.pictureid })">
        <div class="item item-divider" ng-class="{{post.starthourid | setImageClass}}">
        <h2 class="text stable"> {{ post.nameid }} </h2>
        <h3 class="text stable" id="header-date">
        <i class="icon ion-clock"></i> Le {{ post.startdateid | date : "d MMM" }} à {{ post.starthourid | date : "HH:mm" }}</p>
      </div>
      <div class="row">
      <div class="col">
        <h3><i class="icon ion-ios-location"></i> À 500m</h3></div>
      <div class="col"><h3><i class="icon ion-ios-people">
        </i> 2/{{ post.nbguestid }} </h3></div>
      </div>
      <button class="button button-stable" id="positive-btn-price" disabled>{{ post.priceid }}€</button>
      <img class="imgProfilPostPositive" src="{{ post.userid.facebook.cachedUserProfile.picture.data.url }}">
      <div class="item item-divider" id="footerPostNotepositive"><p> <i class="fa fa-star"></i> Popular </p> </div>
        </div>
      </div>

</div></div>

App JS：

  .state('tabpost', {
  url: '/tabpost/:postname/:postdescription/:postdate/:posthour/:postprice/:postnbguest/:postpicture',
  templateUrl: 'templates/tab-post.html',
  controller: 'PostCtrl',
  })

Controller JS：

        $scope.nameid = $stateParams.postname;
        $scope.descriptionid = $stateParams.postdescription;
        $scope.startdateid = $stateParams.postdate;
        $scope.starthourid = $stateParams.posthour;
        $scope.priceid = $stateParams.postprice;
        $scope.nbguestid = $stateParams.postnbguest;
        $scope.userid.facebook.cachedUserProfile.picture.data.url = $stateParams.postpicture;

如何在我的帖子页面中传递我的照片？

感谢您的时间。

Answer 1

在src属性中使用{{hash}}之类的Angular标记并不能正常工作：浏览器将使用文字文本{{hash}}从URL中获取，直到Angular替换{{hash}中的表达式}。 ngSrc指令解决了这个问题。

写它的错误方法：

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

写它的正确方法：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

https://docs.angularjs.org/api/ng/directive/ngSrc

Angular JS / Ui路由器 - StateParams中的Post Image URL

1 个答案: