Передача заводских данных с родительского контроллера для выделения директивы scope

Итак, у меня есть проблема с изолированием области действия директивы. Прежде чем я выделил область действия, она отлично работала, вытаскивая функцию, которая получала данные с фабрики, из родительской области. Эта директива будет слайдером, который должен иметь возможность иметь несколько экземпляров на странице. По этой причине мне нужно было выделить сферу действия. Я пробовал несколько разных вещей, и ничего не сработало, поэтому я предполагаю, что у меня что-то еще не так. Вот фрагменты моего кода. Заранее благодарю вас за помощь. :)Передача заводских данных с родительского контроллера для выделения директивы scope

Отредактировано для добавления: Область применения теперь успешно изолирована, но функций, похоже, нет. Когда несколько экземпляров директивы, функции влияют на каждый экземпляр, а не только на один.

Контроллер:

// 

    function BaseController ($scope, dataFactory) { 

$scope.getMedia = function() { 
    dataFactory.getMedia() 
     .success(function (data) { 
      console.log(data); 
      $scope.sliderItems = data.Items; 
      $scope.topItems = []; 
      $scope.bottomItems = []; 

      // divide results of sliderItems into 2 rows 
      // this ensures that first item from EACH ROW disappears 
      for (var i=0; i < $scope.sliderItems.length; i++){ 
       if ((i+2)%2==0) { 
        $scope.topItems.push($scope.sliderItems[i]); 
       } 
       else { 
        $scope.bottomItems.push($scope.sliderItems[i]); 
       } 
      } 
     }) 
     .error(function (error) { 
      $scope.status = 'Unable to load ' + error.message; 
     }); 
} 
    }angular 
.module('bellApp') 
.controller('BaseController', BaseController); 

//

Директива:

function singleSlider() { 
return { 
    // default is A, no need to asign 
    templateUrl: 'views/single-slider.html', 
    scope: { 
     slideritems :'=' 

    },   
    link: function (scope) { 

     scope.displayInfo = function (item) { 
      scope.itemDetail = item; 
      scope.box = true; 
     }; 

     scope.close = function() { 
      scope.box = false; 
     }; 

     scope.sSlide = function() { 
      //set the appropriate direction 
      scope.direction = 1; 
      var slider = scope.slideritems; 
      //remove first item from slider 
      var shift = slider.shift(); 
      //send removed item to end of slider array 
      slider = slider.push(shift); 
     }; 

     scope.sSlideBack = function() { 
      //set the appropriate direction 
      scope.direction = 0; 
      var slider = scope.slideritems; 
      //remove last item from slider 
      var pop = slider.pop(); 
      //send to front of array 
      slider = slider.splice(0,0,pop); 
     }; 
    } 
}; 
    }angular 
.module('bellApp') 
.directive('singleSlider', singleSlider);

Вид:

... 
    <body ng-app="bellApp" ng-controller="BaseController"> 

    <div single-slider media="getMedia()" class="media-slider"></div>

...

источник

2015-01-21 Hayley Mahaney

Можете ли вы создать плункер? Что не работает? –

Вы вызываете getMedia. он должен быть «

». С другой стороны, я не вижу никакого вызова функции внутри функции ссылок директив. –

не пропускайте funtion, если вам нужны только данные. вызывать функцию funtion в контроллере $ scope.getMedia(); и передать результат, что вам нужно $ scope.sliderItems, $ scope.topItems, $ scope.bottomItems к изолированной директиве – micha

function BaseController ($scope, dataFactory) { 

$scope.getMedia = function() { 
    dataFactory.getMedia() 
    .success(function (data) { 
     //same like your 
    }) 
    .error(function (error) { 
     $scope.status = 'Unable to load ' + error.message; 
    }); 

    } 
    $scope.getMedia(); 
} 

angular 
.module('bellApp') 
.controller('BaseController', BaseController);

директива

function singleSlider() { 
return { 
    // default is A, no need to asign 
    templateUrl: 'views/single-slider.html', 
    scope: { 
     topitems :'=', 
     bottomitems :'=' 
    },   
    link: function ($scope) { 

    $scope.displayInfo = function (item) { 
     $scope.itemDetail = item; 
     $scope.box = true; 
    }; 

    $scope.close = function() { 
     $scope.box = false; 
    }; 


    ... (shortened for example) 
    } 
}; 
} 
angular 
.module('bellApp') 
.directive('singleSlider', singleSlider);

Посмотреть ...

<div single-slider topitems="topItems" bottomitems="bottomItems" class="media-slider"></div>

вот и все, что я могу помочь без видеть ваше DataFactory или остальную часть директивы

Edit: или дайте директиву A контроллер и сделайте то, что вы сделали в контроллере для директивы в директивном контроллере

function singleSlider() { 
    return { 
    ... 
    controller: 'NameOfYourController' 
    } 
}

источник

2015-01-21 19:43:48 micha

Спасибо за ответ! Я также понял, что внутри директивы область видимости теперь строчная, и мне нужно отразить это на шаблоне. Так что исправление этих двух вещей помогло. Одна вещь, хотя, является то, что если я пытаюсь поставить два из этих директив на странице вместе, например:

- оба ползунки двигаться в то же самое время, когда щелкнул, поражение цели изолированной сферы , :( Я отправлю всю директиву для одного слайдера. –

если мой ответ помог вам, верхняя часть для моего ответа будет хорошей. – micha

Я пробовал, но говорит, что мне нужна 15 репутации.:( –

Передача заводских данных с родительского контроллера для выделения директивы scope

ответ

Смежные вопросы