具有隔离范围的角度指令

Question

我很难理解Angular Directives。我有一组来自另一个文件的数据，我在我的HTML中重复（它是一堆国家名称及其标志）。我需要两个指令<outer-box>和<flag>。在页面加载时，国家/地区名称应显示占位符图像。单击占位符图像时，应显示标志图像，并更改背景颜色。 两个指令必须是隔离范围。当你在<outerbox>指令中时，我会遇到如何更改样式/添加<flag>指令类的问题。

这是我的HTML

<div class="blocks" ng-repeat="country in countries">
    <outer-box>
    </outer-box>
</div>

和我的角度代码

var app = angular.module('worldApp', []);

app.controller('mainController',['$scope','$http',function($scope, $http){
  $scope.countries = [];
  $http.get('./js/flags.js').then(function(response){
    $scope.countries = response.data;
  });
}]);

app.directive('outerBox', function(){
  return {
    restrict: 'AE',
    template: "<h1>{{country.name}}</h1>" + '<flag></flag>'
  }
});

app.directive("flag", function(){
  return {
   restrict: 'AE',
   link: function(scope, elem, attrs) {
       elem.bind('click', function() {
         elem.addClass("active");
         elem.css("background-image", 'url("{{country.flag}}")');
       });
       elem.bind('mouseover', function() {
           elem.css('cursor', 'pointer');
       });
   }
  }

});