javascript - 自定义指令合并中的动态 ng-bind

Question

我有一个由自定义指令形成的按钮，一旦用户单击，它将进入 Controller 中的 $scope.countClicker ，其中它将计算按钮被单击的次数。单击的次数会将其传递到数据工厂的城市名称关联起来。然后，它将根据来自数据工厂的数据创建一个面板，如指令.js 中所示

我的问题是，一旦我单击多次，所有应该唯一的表达式就会变得相同。例如，$scope.name3 应该只显示“Osaka”，但是前 3 个面板都应该具有来 self 的 for 循环的唯一 ID($scope.name0、$scope.name1、$scope.name2)，所有面板都具有“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));
         });
     };
 });

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

我意识到我的错误是for循环。在 for 循环中，它迭代了 14 次，因此 $scope.name[0-13] 和所有其他变量每次点击都会触发，这就是为什么所有面板都是相同的。

但是在 Vivz 的帮助下，我放弃了 for 循环并使用了“cityCounter”变量。