Question

在我的模板中，我可以使用

显示数据中的图像

-(void)loginWithFacebook{

    FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
    [login
     logInWithReadPermissions: @[@"email",@"user_about_me",@"user_hometown",@"user_education_history",@"user_friends",@"user_likes",@"user_likes",@"user_location",@"user_hometown",@"public_profile"]
     fromViewController:self
     handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
         if (error) {
             NSLog(@"Process error");
         } else if (result.isCancelled) {
             NSLog(@"Cancelled");
         } else {
             NSLog(@"FB_LOGIN_SUCCESS");
             if ([FBSDKAccessToken currentAccessToken]) {
                 [[[FBSDKGraphRequest alloc] initWithGraphPath:@"me" parameters:nil]
                  startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection, id result, NSError *error) {
                      if (!error) {
                          NSLog(@"fetched user:%@", result);
                      }else{

                          NSLog(@"FB_ME_REQUEST_ERROR:%@",error);
                      }
                  }];
             }
         }
     }];

}

imageURL始终返回带有URL的高分辨率图像，例如

ng-style="{'background-image':'url({{f.flower.imageURL}})'}"

然而，端点也有较小的图像，如

https://s3.amazonaws.com/images/FlowerImages/Rose_1920.jpg

我如何创建一个指令来遍历URL直到下划线并传入我想要的大小（取决于视图）以在下划线和.jpg之间进行更新？

Answer 1

根据你的例子，我认为你不需要指令。只需在控制器中添加一个功能即可。

而不是

ng-style="{'background-image':'url({{f.flower.imageURL}})'}"

DO

ng-style="{'background-image':'url({{generateImageUrl(f.flower.imageURL, 320)}})'}"

你的控制器将有标准的javascript来操纵网址：

function generateImageUrl(url, size) {
  var n = url.lastIndexOf("_");
  var beforeUnderscore = url.substring(0, n);
  var afterUnderscore = url.substring(n+1);
  var suffix = afterUnderscore.split('.')[1];

  return beforeUnderscore + "_" + size + "." + suffix;
}

同样的功能也适用于图像

<img ng-src="{{generateImageUrl(f.flower.imageURL, 320)}}">

注意：使用ng-src代替src，以防止浏览器在角度引导前请求网址。

AngularJS指令修改URL

1 个答案: