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

Passing factory data from parent controller to isolate scope directive

本文关键字：隔离 范围 指令 数据 工厂 控制器      更新时间：2023-09-26

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

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

控制器：

    //
    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>

。

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>

这就是我可以在不查看您的数据工厂或指令其余部分的情况下提供帮助

的全部内容

编辑：或为您的指令提供一个控制器，并在指令控制器中为指令执行

的操作 
function singleSlider() {
  return {
  ...
  controller: 'NameOfYourController'
  }
}
相关文章：