Question

我只是盯着Angular的指令，虽然我可以在模板中在线执行此操作，但我已经致力于为以下任务创建指令的概念...

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

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

以下是我希望如何将大型个人资料图片放入视图中：

<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

这样做是为了使指令有效吗？

Answer 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
 }

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

Answer 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元素。

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

2 个答案: