Блог

Не мог бы кто-нибудь объяснить, что происходит, когда я использую .scope() внутри директивы?

У меня есть директива, которая назначается для создания сетки квадратов. При загрузке я бы хотел, чтобы эти квадраты были интерактивными, поэтому я назначил

 ng-click="disabled || add($index)"
  

и затем link: function () {} я запускаю:

 scope.add = function (index) {
     scope.disabled = true;
}
  

так что все они становятся отключенными по щелчку.

Затем у меня есть служба, которая принимает индекс одного из полей, на которое нажимается, выполняет некоторую логику, а затем возвращает другие возможные квадраты, которые могут быть интерактивными. Служба возвращает массив индексов, например [2,5,6,7]

Затем я беру этот массив, перебираю его и назначаю эти поля интерактивными через их индекс:

 for (var x = 0; x < arr.length; x  ) {
    var nScope = el.children().eq(arr[x]).scope();
    nScope.disabled = false;
}
  

Впоследствии, когда щелкается другой из вышеперечисленных элементов, оригинал scope.disabled = true; игнорируется, а те, которые я настраиваю выше в цикле, чтобы быть интерактивными, остаются интерактивными… Почему это? Что происходит, когда я запускаю .scope() выше, и как мне обновить сетку, чтобы она снова не была интерактивной, пока служба не вернется с более возможными ходами?

И, конечно, если есть более правильный способ сделать это, пожалуйста, поделитесь.

Редактировать:

Добавление дополнительного кода по запросу в комментариях:

Шаблон HTML:

 <div 
    class="cell" 
    ng-click="disabled ||  addItem($index)" 
    ng-disabled="disabled" 
    ng-repeat="cell in ngModel.grid track by $index">{{item}}</div>
  

Настройки для директивы следующие:

 return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        ngModel: '='
    },
    templateUrl: 'scripts/grid/grid.html',
    link: function () {
        //code above goes here
    }
}
  

Служба выполняет различные функции, одна из которых заключается в предоставлении того, какие возможные объекты можно щелкнуть, на основе индекса объекта, на который был сделан первоначальный щелчок. Для целей этого вопроса я опустил код службы, поскольку моя единственная проблема пока заключается в том, чтобы точно выяснить, что делает .scope() и как я могу использовать это в своих интересах.

Это не дает полного ответа на ваш вопрос, но может быть подходом, на который вы могли бы опираться.

Посмотрите на эту скрипку: http://jsfiddle.net/HB7LU/4553 /

 var myApp = angular.module('myApp',[]);


myApp.service('myService', function() {
    return{
        saveBox: function(id)
        {
        alert('gonna update box with id: ' id);
        }
    }
});


myApp.directive('boxgenerator', ['myService', function(myService) {
    return {
        template: '<div class="box {{status}} -  {{id}}">{{status}}</div>',
        scope:{
            id: '@id',
            status: '@status'
            },
    link : function(scope, element, attrs) 
        {
            element.bind("click",function(){
               save = myService.saveBox(scope.id);
               scope.status = 'disabled'; 
               scope.$apply();
            });
        }
    }
}]);


function MyCtrl($scope) {
    $scope.boxes = [];
    $scope.box = { status: 'enabled' };

    for (i = 0; i < 9; i  )
    {
       $scope.boxes.push($scope.box);
    }
}
  

Возможно, из этого вы можете провести рефакторинг более простым способом.