自定義指令合併中的動態ng綁定

我有一個按照我的自定義指令形成的按鈕，一旦用戶點擊它，它將進入控制器中的$scope.countClicker，在那裏它將計算按鈕被點擊的次數。它被點擊的次數將把它將通過的城市名稱與數據工廠相關聯。然後從數據工廠的數據，它會創建一個面板，如指令所示.js自定義指令合併中的動態ng綁定

我的問題是，一旦我點擊不止一次，所有表達式應該是獨一無二的轉向是相同的。例如，$ scope.name3應該只顯示「Osaka」，但前面的3個面板都應該有我的for循環（$ scope.name0，$ scope.name1，$ scope.name2）中的唯一ID，它們都有「Osaka」作爲他們的頭銜。我原本計劃點擊次數可以用作唯一ID，因此每個面板都不會相互衝突，但由於某種原因它是相互衝突的。

如果有人可以請幫忙指出爲什麼會發生這將不勝感激。謝謝！

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

控制器：

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

來源

2017-07-04 hiswendy

您的控制檯在點擊按鈕時是否正確打印值？ – Vivz

嗨@Vivz是的，我打印出我的點擊，他們是正確的 – hiswendy

@Vivz我意識到我的錯誤。這是for循環。當我打印for循環時，$ scope.name [0-13]全部打印出來，這就解釋了爲什麼面板具有相同的表達式。對於進入for循環和單擊迭代，您有任何建議，而不是讓for循環全部運行14次嗎？ – hiswendy

您可以移除您的for循環，該循環將通過點擊數的幫助將相同的數據重新分配給每個變量。

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

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

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

來源

2017-07-04 06:24:54 Vivz

我意識到是在for循環我的錯誤。在for循環中，它迭代了14次，因此$ scope.name [0-13]和所有其他變量每次點擊觸發，這就是爲什麼所有面板都是相同的。

但是在Vivz的幫助下，我放棄了for循環並改用我的「cityCounter」變量。

來源

2017-07-04 06:12:02 hiswendy

自定義指令合併中的動態ng綁定

回答

相關問題