AngularJS指令运行时绑定

Question

我还在学习angularjs，今天我写了第二个指令（hello world是第一个）。

我不知道plunkr的错误。我无法在plunkr上设置AngularJS。所以在这里分享图像。至少你不知道。

我在做什么

我正在建立一个联系人列表应用程序，我用pic列出用户，当你点击用户应用程序显示其详细信息时，你也可以编辑和添加新用户。我正在从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”这样的默认图片，因为没有用户ID。以下是我修改它的方法。

    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”图片。

Answer 1

我怀疑你的$watch表达式不正确。哪个没有触发你的观察者函数imageid范围变量。

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