指令不會刷新本身範圍變更

Question

我有一個指令來顯示的gravatar像如下：

angular.module('ngGravatar').directive('gravatar', function(){ 
    return { 
     restrict: 'E', 
     template: '<img ng-src={{gravatarUrl}}>', 
     scope: {email: '='}, 
     controller: function($scope, md5){ 
      var url = 'http://www.gravatar.com/avatar/'; 
      $scope.gravatarUrl = url + md5.createHash($scope.email || ''); 
     } 
    }; 
}); 

我用它在我看來，這樣的

<gravatar email="vm.email"></gravatar> 

當視圖加載， vm.email被異步更新，並且當其值的更新，該指令的gravatar不會自我更新和使用默認的標誌停留...

我怎樣才能使它自動更新？有$scope.$watch？我認爲雙向數據綁定已經解決了這個問題。 有什麼我錯過了嗎？

Answer 1

嘗試使用$ scope。$ watch來處理更改。

angular.module('ngGravatar').directive('gravatar', function() 
{ 
    return { 
     restrict: 'E', 
     template: '<img ng-src={{gravatarUrl}}>', 
     scope: { email: '='}, 
     controller: function($scope, md5){ 
      $scope.$watch('email', function(email) { 
       if (email) 
       { 
        var url = 'http://www.gravatar.com/avatar/'; 
        $scope.gravatarUrl = url + md5.createHash(email || ''); 
       } 
      }); 
     } 
    }; 
}); 

Answer 2

異步數據到達後，您的指令不刷新，因爲它不知道它的到達。

它只能可能知道在其控制器中進行的更改，而不是父控制器中發生的更新。

您可以在變量上設置監視，以便在適當的視圖模型更改時更新其內容。

查看下面的代碼片斷，演示如何使用監視器跟蹤外部更改，並自動跟蹤內部更改，並通過數據綁定功能更新其內容。

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController) 
 
    .directive('gravatar', gravatar); 
 

 
DefaultController.$inject = ['$timeout']; 
 

 
function DefaultController($timeout) { 
 
    var vm = this; 
 

 
    $timeout(function() { 
 
    vm.gravatarName = 'gravatar.png'; 
 
    }, 500); 
 
} 
 

 
function gravatar() { 
 
    var directive = { 
 
    restrict: 'E', 
 
    scope: { 
 
     name: '=' 
 
    }, 
 
    template: '<img ng-src="{{vm.source}}"/>', 
 
    controller: GravatarController, 
 
    controllerAs: 'vm', 
 
    bindToController: true, 
 
    }; 
 

 
    return directive; 
 
} 
 

 
GravatarController.$inject = ['$scope', '$timeout']; 
 

 
function GravatarController($scope, $timeout) { 
 
    var vm = this; 
 
    var URL = 'https://d13yacurqjgara.cloudfront.net/users/4085/screenshots/2072398/'; 
 

 
    // external changes need to be explicitly watched using watchers 
 
    $scope.$watch('vm.name', function(newValue, oldValue) { 
 
    if (newValue) { 
 
     vm.source = URL + vm.name; 
 
    } 
 
    }); 
 

 
    $timeout(function() { 
 
    // internal changes are automatically watched 
 
    vm.source = 'https://pbs.twimg.com/profile_images/453956388851445761/8BKnRUXg.png'; 
 
    }, 2000); 
 
}

img { 
 
    height: 250px; 
 
    width: 250px; 
 
    border: 1px solid #E6E6E6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as vm"> 
 
    <gravatar name="vm.gravatarName"></gravatar> 
 
    </div> 
 
</div>