从父控制器传递工厂数据以隔离范围指令

Question

所以，我在隔离指令范围方面遇到了问题。在我隔离作用域之前，它工作正常，从父作用域中提取从工厂获取数据的函数。该指令将是一个滑块，需要能够在页面上有多个实例。出于这个原因，我需要隔离范围。我尝试了一些不同的东西，但没有任何效果，所以我猜我还有其他问题。这是我的代码片段。预先感谢您的帮助。 :)

编辑添加：范围现已成功隔离，但功能似乎没有。当指令有多个实例时，函数会影响每个实例，而不仅仅是一个实例。

控制器：

    //

    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>

...

Answer 1

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 或其余指令的情况下所能提供的所有帮助

编辑： 或者给你的指令一个控制器，然后在指令控制器

中为指令做你在控制器中所做的事情

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

从父控制器传递工厂数据以隔离范围指令

Passing factory data from parent controller to isolate scope directive

javascript

scope

directive

angularjs