自定义指令不会在 ui-grid 的 cellTemplate 中更新

Custom directive doesn't get updated inside cellTemplate of ui-grid

我在 ui-gridcellTemplate 中使用名为 flag 的自定义指令。该指令只接受国家名称(美国或加拿大),并显示其相应的标志。当页面第一次加载时,该指令工作正常。但是,以后即使我将标志的值更改为任何值,自定义指令也不会更新并显示新标志。不确定我错过了什么。

Plnkr

指令被编译一次!您需要查看属性或设置双向绑定!

app.directive('flag', function() {
  var flags = {
    USA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/us.png',
    CANADA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/ca.png'
  };

  return {
      restrict: "A",
      scope: {
          flag: "@"
      },
      link: function(scope, elem, attrs) {
          scope.$watch('flag', function(newValue, oldValue){
              angular.element(elem).attr('src', flags[newValue]);
          });
      }
  };
});

工作plunkr ==> http://plnkr.co/edit/dcHDMEY8MpQnCnm99aDd?p=preview