javascript - AngularJS 指令运行时绑定(bind)

Question

我仍在学习 angularjs，今天我写了第二个指令(hello world 是第一个)。

我不知道 plunkr 有什么问题。我无法在 plunkr 上设置 AngularJS。所以在这里分享一张图片。至少你不会知道。

我在做什么

我正在构建一个联系人列表应用程序，我在其中列出带有图片的用户，当您单击用户应用程序时显示其详细信息，您也可以编辑和添加新用户。我正在从 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   
      };
    });    

实际问题是什么

这只会绑定(bind)图像一次，如果我单击其他用户，它不会加载其图像。如果我点击用户 1，那么在用户详细信息页面中我会看到“用户 1”图片，然后如果我点击“用户 2”，它仍然显示“用户 1”图片。 当我尝试添加新用户时应该显示“nouser.jpg”图像，它仍然显示“user 1”图片。

Answer 1

我怀疑您的 $watch 表达式不正确。这不会触发您的观察器函数 imageid 范围变量更改。

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