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指令運行時綁定

回答

相關問題