Javascript ng click和ng show在角度模式下与自定义指令不起作用

我正在创建以下指令：

    .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)
      }
    })
  }
}
})

---

当我使用我的视图时，显示和隐藏功能工作得很好，但是现在我的指令中有了

ng show

和

ng click

，尽管创建了相同的html（指令html与模板html），但这些内置指令没有发挥作用。我需要做些什么来确保生成的指令在我的客户指令中工作吗？

这是因为您在链接函数中使用ngShow和其他角度指令定义元素。链接在角度生命周期中太晚，无法激活指令。如果希望指令处于活动状态，请定义一个模板。如果需要，可以启用编译方法。。。但我更喜欢@pixelbits的想法。你最初的想法很好（非常狭隘），为什么你会偏离？问题是我正在尝试将每个谷歌标记链接到它相应的

li

元素。我还没有找到链接，因为我遇到了这个问题。这有意义吗？我会用你最初的想法和一个例子来发布你的问题。

  <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>