在 Angular 指令中放置条件逻辑的位置答案

【问题标题】：Where to put conditional logic in an Angular directive在 Angular 指令中放置条件逻辑的位置
【发布时间】：2014-09-18 20:11:46
【问题描述】：

我只是开始关注 Angular 的指令，虽然我可能可以在模板中内联执行此操作，但我已经致力于为以下任务创建指令的概念...

我有一个由 JSON API 提供支持的网络应用程序。我想要一个指令来确定用户个人资料图像的来源（上传或社交），如果它来自 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

为了让指令起作用，这会去哪里？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

你应该把它放在链接函数中

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
 }

指令的控制器 - 主要用于指令之间的通信。

【讨论】：

阿列克谢，似乎 Link 是要走的路，但我仍然没有让它工作。你能发布一个更完整的指令应该是什么样子的例子吗？
@aressidi 如果你准备了一个小提琴，我可以让它工作

【解决方案2】：

我会把它放到指令控制器中，所以它可能看起来像这样：

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 元素有关。

【讨论】：