Dynamische ng-bind in einer benutzerdefinierten Richtlinie Verschmelzung

Question

Ich habe eine Schaltfläche aus meiner benutzerdefinierten Direktive gebildet, wo einmal der Benutzer klickt in $scope.countClicker in der Steuerung gehen, wo es die Anzahl der Klicks gezählt wird. Bei der Anzahl der Klicks wird der Stadtname, den sie durchläuft, mit der Datenfactory verknüpft. Dann wird aus den Daten aus der Data factory ein Panel wie in directive.js

erstellt. Mein Problem ist, wenn ich mehr als einmal klicke, werden alle Ausdrücke, die einzigartig sein sollen, gleich. Zum Beispiel sollte $ scope.name3 nur "Osaka" anzeigen, aber die vorherigen 3 Panels, die alle eine eindeutige ID von meiner for-Schleife haben sollten ($ scope.name0, $ scope.name1, $ scope.name2), haben alle "Osaka" wie ihr Titel auch. Ich plante ursprünglich, dass die Anzahl der Klicks als eine eindeutige ID verwendet werden könnte, so dass jedes Panel nicht miteinander kollidieren würde, aber aus irgendeinem Grund ist es.

Wenn jemand bitte helfen kann, wieso dies geschieht, würde das sehr geschätzt werden. Vielen Dank!

directive.js:

app.directive('addbuttonsbutton', function() { 
    return { 
     restrict: "A", 
     template: "<md-button addbuttons ng-click='clickCounter()' class='md-fab md-mini'>+</md-button>" 
    } 
}); 


//Directive for adding buttons on click that show an alert on click 

app.directive('addbuttons', function($compile) { 
    return function(scope, element, attrs) { 
     element.bind("click", function() { 
      scope.count++; 
      var counter = scope.count; 
      console.log('this is scope count' + scope.count); 
      angular.element(document.getElementById('space-for-buttons')).prepend($compile(//adding a panel to my view 
       "<div class= panel>" + 
       "<h3 id=title" + scope.count + ">{{name" + scope.count + "| uppercase}}</h3><br>" + 
       "<i ng-class=weatherClass id=icon></i>" + 
       "<h3 id= temp >{{fTemp" + scope.count + " | uppercase}}</h3>" + 
       "<p style= 'color: #FAFAFA;' >{{description" + scope.count + "| uppercase}}</p>" + 
       "<p>{{location}}</p><br>" + 
       "<div id= wrapper ><div id= first ><i id= smallIcons class= 'wi wi-horizon-alt' ></i>" + 
       "<p id= eventID >SUNRISE</p><p id= subID >{{formattedSunrise" + scope.count + "}}</p></div>" + 
       "<div id= second ><i class= 'wi wi-strong-wind' id= smallIcons ></i>" + 
       "<p id= eventID >WIND</p><p id= subID >{{speed" + scope.count + "}}</p></div>" + 
       "<div id= third ><i class= 'wi wi-humidity' id= smallIcons ></i>" + 
       "<p id= eventID >HUMIDITY</p><p id= subID >{{humidity}}</p></div></div></div>")(scope)); 
     }); 
    }; 
}); 

-Controller:

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


app.controller('weatherCtrl', ['$scope', 'Data', 

     function($scope, Data) { 
      $scope.count = -1; 

      $scope.city = 'Berkeley'; 
      var cityCounting = 0; 
      var counter = 0; 

      var cities = [ 
      'Sydney, AU', 
      'Melbourne, AU', 
      'Tokyo', 
      'Osaka', 
      'Seoul', 
      'Hong Kong', 
      'London', 
      'Amsterdam', 
      'Berlin', 
      'Paris', 
      'Barcelona', 
      'New York', 
      'Dubai', 
      'Antarctica' 
     ]; 

      $scope.clickCounter = function(){ 
       cityCounting = counter++; 
       $scope.city = cities[cityCounting]; 
       console.log($scope.city); 
       console.log(cityCounting); 
       Data.getApps($scope.city).then(function(data) { 


      for (var i = 0; i < 14; i++) { 
       $scope.data = data; 

       $scope['name' + i] = data.name; 

       $scope['temp'+i] = data.main.temp; 

       $scope['fTemp' + i ] = ($scope['temp' + i] * (9/5) - 459.67).toFixed(1) + " °F"; 
      }//end of for loop 

      }); end of Data service 
      }//end of controller 

Answer 1

Sie können Ihre for-Schleife entfernen, die die gleichen Daten mit Hilfe Ihrer Klickanzahl jeder Variablen neu zuordnet.

$scope['name' + cityCounting] = data.name; 

$scope['temp'+cityCounting] = data.main.temp; 

$scope['fTemp' + cityCounting] = ($scope['temp' + cityCounting] * (9/5) - 459.67).toFixed(1) + " °F"; 

Answer 2

ich meinen Fehler erkannte die for-Schleife war. In der for-Schleife wurde 14 mal iteriert und damit $ scope.name [0-13] und alle anderen Variablen feuern pro Klick, weshalb alle Panels gleich waren.

Aber mit Vivz 'Hilfe habe ich die for-Schleife aufgegeben und stattdessen meine "cityCounter" -Variable verwendet.