Question

我完全难过了。我不理解为什么我在plunker（第51行）的对象上获取父作用域。

据我所知，看起来Angular必须在过滤器上调用.call（）或.apply（），将其上下文设置为当前$ scope或其他内容。但这看起来很奇怪，为什么不只是调用方法并单独留下上下文？

angular.module('MyApp', [])
.controller('MyCtl', function(
  $scope,
  WidgetsService
){
  WidgetsService.getWidgets().then(function(widgets){
    $scope.entireWidgetsList = widgets;
  });

})
.directive('widgetsFilteredList', function(
  WidgetsService
){
  return{
    restrict: 'E',
    scope: {
      filter: '='
    },
    templateUrl: 'widgets-filtered-list.directive.html',
    controller: function($scope){
      $scope.typeAheadModel = null;
      $scope.widgetsResults = null;
      $scope.$watch(function(){
        return ($scope.typeAheadModel) ? $scope.typeAheadModel : null;
      }, function(newV, oldV){
        if(newV && newV != oldV){
          var reqPromise = WidgetsService.getWidgets();

          reqPromise.then(function(widgets){
            $scope.widgetsResults = widgets;
          }, angular.noop);
        }
      });
    }
  };
})
.factory('WidgetFactory', function(){
  function Widget(data){
    var defaultStructure = {
      id: null,
      color: null,
      cogs: []
    };

    _.merge(this, defaultStructure, data);
  }

  Widget.prototype.widgetFilter = function(){
    var self = this;
    return function(widget){
      console.log(self); //How the heck do I get this to give me the proper context??
      //compare 'widget' this the widget in context for return value.  Like:
      // return !!!(widget.id === self.id);  //Would remove the context widget from the result set;
      return true;
    }
  };

  var create = function(data){
    return new Widget(data);
  };

  return {
    create: create
  };
})
.service('WidgetsService', function(
  WidgetFactory,
  $q,
  $timeout
){
  return {
    getWidgets: function(){
      var def = $q.defer();

      $timeout(function(){
          var widgetResults = [
            WidgetFactory.create({
              id:1,
              color: 'red',
              cogs: []
            }),
            WidgetFactory.create({
              id:2,
              color: 'blue',
              cogs: [1, 2]
            }),
            WidgetFactory.create({
              id:3,
              color: 'green',
              cogs: []
            }),
            WidgetFactory.create({
              id:4,
              color: 'yellow',
              cogs: []
            })
          ];

          def.resolve(widgetResults);
      }, 500);

      return def.promise;
    }  
  };
});

Answer 1

您正在将widgetFilter作为闭包传递给$ scope，这就是为什么您看到console.log（self）输出是$ scope对象的原因。而是将widgetfilter函数放在工厂中，如下所示：

.factory('WidgetFactory', function(){
  function Widget(data){
    var defaultStructure = {
      id: null,
      color: null,
      cogs: []
    };

    var self=this
    this.widgetFilter=function(){
      console.log(self)
    }

    _.merge(this, defaultStructure, data);
  }

在angularJs过滤方法中获取对象上下文？

1 个答案: