Question

我正在尝试在我的angular指令中使用事件监听器以及服务。

我有范围问题，因为我希望'this'引用我的服务'this'。

现在，在我的服务中，'this'返回：

<input type="file" id="files" name="files[]" style='display:none'
multiple/>

我希望能够访问我服务的本地变量。

模板

<input type="file" id="files" name="files[]" style='display:none' multiple/> <button type="button" class="btn {{style}}" ng-click="pickFrom()">{{label}}</button>

指令

function pickerLocalDirective(pickerLocalService){
    return {
        'scope':{},
        'link': function(scope, element, attrs){

            scope['label'] = pickerLocalService.label;
            scope['style'] = pickerLocalService.style;
            // pick method
            scope['pickFrom'] = function(){
                document.getElementById('files').click();
            }

            document.getElementById('files').addEventListener('change', pickerLocalService.handleFileSelect, false);
        },
        'templateUrl': 'components/picker/pickerLocal/pickerLocal.html'
    };
}

服务

function pickerLocalService(){
    ...
    this.name = 'Local';
    ...
}
pickerLocalService.prototype.handleFileSelect = function(evt) {
    ...
    window.console.log(this);
    // NOT WORKING
    window.console.log(this.name);
    ...
};

Answer 1

如果您正在尝试创建一个充当构造函数的函数，并将实例变量存储为this.someProperty，则需要使用new关键字调用您的函数。

话虽这么说，但这并不是你如何制作有棱有角的服务。

来自the AngularJS docs on services：

服务通过Module API注册到模块。通常，您使用Module#factory API来注册服务：

var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

在您的情况下，您希望服务返回具有name属性和handleFileSelect方法的对象。你可以这样做：

// create a module
var myModule = angular.module('myModule', []);

// register a service to it
myModule.factory('pickerLocalService', function() {
  // declare your variables
  var name = 'Local';

  // return an object with the properties you need
  return {
    name: name,
    handleFileSelect: function(evt) {
      // should work now
      console.log(name)
    }
  }
});

// create a directive that depends on your service
myModule.directive('pickerLocalDirective', ['pickerLocalService', function(pickerLocalService){
  // ... your directive 
}]);

指令事件监听器回调后的angularjs服务范围问题

1 个答案: