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

Question

我在ui-grid 的cellTemplate 中使用了一个名为flag 的自定义指令。该指令只接受一个国家名称（美国或加拿大），并显示其相应的标志。该指令在页面首次加载时工作正常。但是，稍后即使我将标志的值更改为任何值，自定义指令也不会更新并显示新标志。不知道我错过了什么。

Plnkr

Answer 1

指令被编译一次！需要看属性或者设置双向绑定！

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