Javascript 自定义指令合并中的动态ng绑定

我有一个由自定义指令形成的按钮，用户单击该按钮后，它将进入控制器中的

$scope.countClicker

，它将计算按钮被单击的次数。它被点击的次数将关联它将传递给数据工厂的城市名称。然后从数据工厂的数据中创建一个面板，如directive.js所示

我的问题是，一旦我多次单击，所有应该是唯一的表达式都会变成相同的。例如，$scope.name3应该只显示“Osaka”，但是前面的3个面板都应该具有来自我的For循环的唯一ID（$scope.name0、$scope.name1、$scope.name2），它们的标题也都是“Osaka”。我最初计划将点击次数用作一个唯一的ID，这样每个面板就不会相互冲突，但出于某种原因确实如此

如果有人能帮忙指出为什么会发生这种情况，我们将不胜感激。谢谢大家!

指令.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

app.directive（'addbuttonsbutton'，function（）{
返回{
限制：“A”，
模板：“+”
}
});  
//用于添加单击时显示警报的按钮的指令
应用程序指令（'addbuttons'，函数（$compile）{
返回函数（范围、元素、属性）{
元素绑定（“单击”，函数（）{
scope.count++；
var计数器=scope.count；
log（'这是范围计数'+范围计数'）；
angular.element（document.getElementById（'space-for-buttons'））.prepend（$compile（//将面板添加到我的视图中
"" +
“{name”+scope.count+“|大写}}}
”+
"" +
“{fTemp”+scope.count+“|大写}}”+
“
{{description”+scope.count+“|大写}}
”+
“{{location}

”+
"" +
“
SUNRISE
{{formattedSunrise”+scope.count+“}}}
”+
"" +
“
WIND
{{speed”+scope.count+“}}
”+
"" +
“
湿度
{{湿度}}
”（范围）；
});
};
});

控制器：

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

var-app=angular.module（'weatherApp.controllers'，[]）；
app.controller（'weatherCtrl'，['$scope'，'Data'，
功能（$范围、数据）{
$scope.count=-1；
$scope.city='伯克利'；
var cityCounting=0；
var计数器=0；
var城市=[
“澳大利亚悉尼”，
“澳大利亚墨尔本”，
"东京",，
"大阪",，
"汉城",，
"香港",，
“伦敦”，
“阿姆斯特丹”，
“柏林”，
“巴黎”，
“巴塞罗那”，
“纽约”，
“迪拜”，
“南极洲”
];
$scope.clickCounter=函数（）{
城市计数=计数器++；
$scope.city=城市[城市计数]；
console.log（$scope.city）；
控制台日志（城市计数）；
Data.getApps（$scope.city）。然后（函数（数据）{
对于（变量i=0；i<14；i++）{
$scope.data=数据；
$scope['name'+i]=data.name；
$scope['temp'+i]=data.main.temp；
$scope['fTemp'+i]=（$scope['temp'+i]*（9/5）-459.67）；
}//循环结束
})；数据服务结束
}//控制器末端

---

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

---

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

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

---

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

您可以删除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";

---

您可以删除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";

---

您的控制台在点击按钮时是否正确打印了值？嗨@Vivz是的，我正在打印我的点击，它们是correct@Vivz我意识到了我的错误。这是for循环。当我打印for循环$scope.name[0-13]时都打印出来了，这就解释了为什么面板具有相同的表达式。对于输入for循环并单击一次迭代，而不是让for循环一次运行14次，您有什么建议吗？您可以使用cityCounting变量来分配数据，如下所示……$scope['name'+cityCounting]=data.name；像一个符咒一样工作：）Ty！你的控制台在点击按钮时正确打印值了吗？嗨@Vivz是的，我正在打印我的点击，它们是correct@Vivz我意识到了我的错误。这是for循环。当我打印for循环$scope.name[0-13]时都打印出来了，这就解释了为什么面板具有相同的表达式。对于输入for循环并单击一次迭代，而不是让for循环一次运行14次，您有什么建议吗？您可以使用cityCounting变量来分配数据，如下所示……$scope['name'+cityCounting]=data.name；像一个符咒一样工作：）Ty！