自定义指令合并中的动态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绑定

回答

相关问题