Question

我有一个由我的自定义指令组成的按钮，一旦用户点击它就会进入控制器中的$scope.countClicker，它将计算按钮被点击的次数。单击它的次数会将它将传递到的城市名称与数据工厂相关联。然后，从数据工厂的数据中，它将创建一个面板，如directive.js

所示

我的问题是，一旦我点击多次，所有应该是唯一的表达式都会变成相同的。例如，$ scope.name3应仅显示＆＃34; Osaka＆＃34;，但前面的3个面板都应该具有来自my for循环的唯一ID（$ scope.name0，$ scope.name1，$ scope.name2）所有人都有＃34;大阪＆＃34;作为他们的头衔。我最初计划点击次数可以用作唯一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

Answer 1

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

但是在Vivz的帮助下，我放弃了for循环并使用了我的＆＃34; cityCounter＆＃34;变量而不是。

Answer 2

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

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

2 个答案: