AngularJS指令运行时绑定

我还在学习angularjs，今天我写了第二条指令（hello world是第一条）。AngularJS指令运行时绑定

我不知道PLUNK有什么问题。我无法在plunkr上设置AngularJS。因此在这里分享图片。至少你不会想到。

我在做什么

我建立一个联系人列表的应用程序，在这里我列出用户PIC，并当U点击用户的应用程序显示其详细信息，您可以编辑和添加新的用户了。我从randomuser.me获取用户图片，因为我写了一个工作正常的指令。指令。它的工作正常。以下是我的代码。

cbApp.directive('userPic', function() { 
    return { 
    restrict: 'E', 
    template: '<img class="circle" ng-src="https://randomuser.me/api/portraits/men/{{imageid}}.jpg">', 
    scope: { 
     imageid: '@' 
    }, 
    } 
});

当它出错

我使用 “添加联系人” 页面相同的指令。它应该显示一个像“nouser.png”这样的默认图片，因为没有用户标识。以下是我如何修改它。

cbApp.directive('userPic', function() { 
     return { 
     restrict: 'E', 
     template: '<img class="circle" ng-src="{{imgsrc}}">', 
     scope: { 
      imageid: '@' 
     }, 
     link: function(scope, elem, attr){ 
      scope.$watch(scope.imageid, function(value) { 
       if(scope.imageid){ 
       scope.imgsrc = 'https://randomuser.me/api/portraits/men/'+value+'.jpg'; 
       } 
       else 
       scope.imgsrc = appConstants.default_pic; 
      }); 
     }, 
     replace: true 
     }; 
    });

请告诉我实际的问题

此结合图像只有一次，如果我点击其他用户它不加载它的形象。如果我点击用户1然后在用户详细信息页面中看到“用户1”图片，那么如果我点击“用户2”它仍然显示“用户1”图片。当我尝试添加新用户时应该显示“nouser.jpg”图片，它仍然显示“用户1”图片。

来源

2017-02-19 www.amitpatil.me

我怀疑你有不正确的$watch表达。哪个不会触发您的观察器功能imageid范围变量更改。

scope.$watch('imageid', function(value) { 
    //.... 
});

来源

2017-02-19 18:47:51

如果我做console.log（scope.imageid）;就在$ watch下面，我可以看到价值。这意味着我已经注意到了正确的变量。我甚至不知道这是否可行，正确的做法。所以问它在stackoverflow。 –

还有一件事，console.log（scope.imageid）;当应用程序加载时工作，然后当我第一次点击个人“conatct”，它不会运行后。 –

你试过改变你的观察者表达，就像我建议的那样？ –

AngularJS指令运行时绑定

回答

相关问题