把条件逻辑放在Angular指令中的地方

问题描述：

我只是盯着Angular的指令，虽然我可以在模板中直接执行这个操作，但我已经承诺为以下内容创建一个指令任务...把条件逻辑放在Angular指令中的地方

我有一个由JSON API支持的Web应用程序。我需要一个指令来确定用户的个人资料图像（上传或社交）的来源，如果它来自Facebook，则执行一些字符串操作，否则选择适当的图像URL（大对拇指），如果它是上传的图像用于显示。

我遇到的问题是在哪里放置这个逻辑。我理解指令的一般概念，但不知道如何处理实现这种情况所需的条件逻辑。

以下是我想放在视图中的大轮廓影像：

<lage-profile-image></large-profile-image>

现在，这里的指令开始，包括我想回到模板：

myApp.directive "largeProfileImage", -> 
    restrict: 'E' 
    replace: true 
    template: "<img src=\"{{photoUrl}}\">"

我会放在哪里以下逻辑虽然？我不一定需要隔离范围，因为每个页面有一个大型配置文件图像。但我无法弄清楚下面的逻辑在哪里 - 在指令的链接中？在指令的控制器中？在指令的范围内？下面确定哪些URL投入上面的模板......

image_diplay = user.profile.image_display 
    if image_display == "facebook" 
    photoUrl = user.profile.avatar.replace(/\?type=square/, '?type=large') 
    else 
    photoUrl = user.profile.image.url

哪里这一点去，以获得该指令工作？

答

应该将它链接功能

function link(scope) { 
var image_diplay = user.profile.image_display 
    if (image_display == "facebook") { 
    scope.photoUrl = user.profile.avatar.replace(/\?type=square/, '?type=large') 
} else { 
    scope.photoUrl = user.profile.image.url 
}

指令的控制器内 - 主要是对指令之间的交际。

阿列克谢，看起来像链接是要走的路，但我仍然没有得到它的工作。你能发表一个更完整的指令应该如何看的例子吗？ – aressidi 2014-09-18 23:23:16

@aressidi如果你准备了一个小提琴，我可以让它工作 – Alexei 2014-09-19 04:22:04

答

我会把它变成指令控制器，所以它可能是这个样子：

myApp.directive "largeProfileImage", -> 
    restrict: 'E' 
    replace: true 
    template: "<img src=\'photoUrl\'>" 
    controller: function($scope){ 
    image_diplay = user.profile.image_display 
    if image_display == "facebook" 
     $scope.photoUrl = user.profile.avatar.replace(/\?type=square/, '?type=large') 
    else 
     $scope.photoUrl = user.profile.image.url 
    }

凡是进入链接应约去操作DOM元素。

把条件逻辑放在Angular指令中的地方

相关推荐