ng-click和ng-show在Angular中不能使用自定义指令

Question

我正在创建以下指令：

    .directive('googlemap', function(dataFactory){
  return {
    restrict: 'E',
    template: '<div id="map" style="width: 85%; height: 300px;"></div>',
    replace: true,
    link: function(scope, el, attrs){
      el.append('<div id="map"><img style="width: 100%; height: 300px;" src="https://d13yacurqjgara.cloudfront.net/users/63485/screenshots/1136567/earth-gif-preloader.gif"></div>')
      var listOfEvents;

      dataFactory.getAll().then(function(data){
        googleMapsData = data;

        var mapCanvas = document.getElementById('map');
        var map = new google.maps.Map(mapCanvas, {
          zoom: 12,
          center: new google.maps.LatLng(googleMapsData.userLat, googleMapsData.userLng)
        });   
        listUpcomingConcerts = $('<ul class="list-group upcoming-concert-list"></ul>');

        for(var i = 0; i < googleMapsData.closeEvents.length; i++){
           marker = new google.maps.Marker({
            position: new google.maps.LatLng(googleMapsData.closeEvents[i].lat, googleMapsData.closeEvents[i].lng),
            icon: './img/microphone-2-256.png'
          });
          var concert = $('<li></li>').addClass('list-group-item upcoming-concert')
          var concertInfo = $('<div class="upcoming-concert-info"></div>')

          venue = $('<p></p>').text(googleMapsData.closeEvents[i].venue)
          city = $('<p></p>').text(googleMapsData.closeEvents[i].city)
          date = $('<p></p>').text(googleMapsData.closeEvents[i].date)

          showLineupButton = $('<button class="btn btn-default pull-right" ng-click="show = !show">See line up</button>')
          if(googleMapsData.closeEvents[i].performance){
            var artistList = $('<ul  ng-show="show" class="list-group line-up"></ul>')
            $.each(googleMapsData.closeEvents[i].performance, function(key,value){
              artist = $('<li class="list-group-item"></li>').text(value.displayName)
              artistList.append(artist)
            })
          }
          concertInfo.append(venue)
          concertInfo.append(city)
          concertInfo.append(date)
          concert.append(concertInfo)
          concert.append(showLineupButton)
          concert.append(artistList)
          listUpcomingConcerts.append(concert)
          marker.setMap(map);

        el.after(listUpcomingConcerts)
      }
    })
  }
}
})

最初我使用我的视图和控制器来创建一个位于我的Google地图元素下方的ul。我在模板中以下列方式执行此操作：

  <ul class="list-group upcoming-concert-list">
    <li ng-repeat="upcoming_concert in googleData.closeEvents" class="list-group-item upcoming-concert">
      <div class="upcoming-concert-info">
        <h4><strong>{{upcoming_concert.eventHeadliner}}</strong></h4> 
        <p>{{upcoming_concert.venue}}</p> 
        <p>{{upcoming_concert.city}}</p> 
        <p>{{upcoming_concert.date}}</p>
      </div>
      <button class="btn btn-default pull-right" ng-click='showLineup=!showLineup'>See line up</button>
      <ul ng-show="showLineup"class="list-group line-up">
        <li class="list-group-item" ng-repeat="lineup in upcoming_concert.performance">{{lineup.displayName}}</li>
        <p style='text-align:center;' ng-hide='upcoming_concert.performance.length'>There are no opening artists for this show.</p>
      </ul>
    </li>
  </ul>

当我使用我的视图时，显示和隐藏功能正常工作，但是现在我的指令中有ng-show和ng-click这些内置指令尽管有相同的html但它们并没有完成它们的工作正在创建（指令HTML与模板HTML）。我需要做些什么来确保构建的指令在我的客户指令中有效吗？