javascript - Function 不是 AngularJS 中的函数

Question

我在使用 AngularJS 时遇到一些问题，我尝试添加类以视差滚动，但出现错误

addTest is not a function

这是scrollTest指令

   testmodule.directive('scrollTest', function($window) {
return {
  restrict: 'A',
  controller: function($scope) {
    $scope.spies = [];
    return this.addTest = function(testObj) {
      return $scope.spies.push(testObj);
    };
  },
  link: function(scope, elem, attrs) {
    $('body').addClass('viewing-page-0');
    return $($window).scroll(function() {
      var highlightTest, pos, test, testElem, _i, _len, _ref;
      highlightTest = null;
      _ref = scope.spies;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        test = _ref[_i];
        test.out();
        testElem = elem.find('#' + test.id);
        if ((testElem != null) && testElem.length !== 0) {
          if ((pos = testElem.offset().top) - $window.pageYOffset <= 0) {
            test.pos = pos;
            if (highlightTest == null) {
              highlightTest = test;
            }
            if (highlightTest.pos < test.pos) {
              highlightTest = test;
            }
          }
        }
      }
      return highlightTest != null ? highlightTest["in"]() : void 0;
    });
  }
};

});

Answer 1

如果您想在模板上使用 addTest，那么 (1) 您应该将函数添加到作用域对象或 (2) 在指令上使用 controllerAs 属性。

//1

  testmodule.directive('scrollTest', function($window) {
return {
  restrict: 'A',
  controller: function($scope) {
    $scope.spies = [];
    $scope.addTest = function(testObj) {
      return $scope.spies.push(testObj);
    };
  },
  link: function(scope, elem, attrs) {
    $('body').addClass('viewing-page-0');
    return $($window).scroll(function() {
      var highlightTest, pos, test, testElem, _i, _len, _ref;
      highlightTest = null;
      _ref = scope.spies;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        test = _ref[_i];
        test.out();
        testElem = elem.find('#' + test.id);
        if ((testElem != null) && testElem.length !== 0) {
          if ((pos = testElem.offset().top) - $window.pageYOffset <= 0) {
            test.pos = pos;
            if (highlightTest == null) {
              highlightTest = test;
            }
            if (highlightTest.pos < test.pos) {
              highlightTest = test;
            }
          }
        }
      }
      return highlightTest != null ? highlightTest["in"]() : void 0;
    });
  }
};
});

//2

 testmodule.directive('scrollTest', function($window) {
return {
  restrict: 'A',
  controllerAs: 'ctrl',
  controller: function($scope) {
    $scope.spies = [];
    this.addTest = function(testObj) {
      return $scope.spies.push(testObj);
    };
  },
  link: function(scope, elem, attrs, ctrl) {// Add the controller to the parameter list if you want to use it here
    $('body').addClass('viewing-page-0');
    return $($window).scroll(function() {
      var highlightTest, pos, test, testElem, _i, _len, _ref;
      highlightTest = null;
      _ref = scope.spies;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        test = _ref[_i];
        test.out();
        testElem = elem.find('#' + test.id);
        if ((testElem != null) && testElem.length !== 0) {
          if ((pos = testElem.offset().top) - $window.pageYOffset <= 0) {
            test.pos = pos;
            if (highlightTest == null) {
              highlightTest = test;
            }
            if (highlightTest.pos < test.pos) {
              highlightTest = test;
            }
          }
        }
      }
      return highlightTest != null ? highlightTest["in"]() : void 0;
    });
  }
};
});

在模板上:

<div ng-click="ctlr.addTest()">

Controller 函数用作构造函数。那么你不需要从中返回任何内容。