AngularJS 지시어 런타임 바인딩

Question

나는 여전히 angularjs를 배우고 있으며, 오늘은 두 번째 지시어 (hello world가 첫 번째 코드)를 작성했습니다.

나는 plunkr에 무슨 문제인지 모른다. plunkr에서 AngularJS를 설정할 수 없었습니다. 여기에 이미지를 공유하십시오. 적어도 당신은 거의 생각할 것입니다. 나는 내가 그림으로 사용자를 나열 연락처 목록의 응용 프로그램을 구축하고

를하고있는 중이 야, 그리고 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: '@' 
    }, 
    } 
}); 

그것이 내가 "연락처를 추가"페이지 같은 지시어를 사용하고

잘못. 사용자 ID가 없으므로 "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"사진이 표시됩니다.

Answer 1

난 당신이 잘못 $watch 표현이 용의자. 귀하의 감시자 기능을 실행하지 않는 것은 imageid 범위 변경 변수입니다.

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