自定义指令无法在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