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'
  }
}

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

1 个答案: