Question

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

addTest不是函数

这是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()">

控制器功能用作构造函数。然后你不需要从它返回任何东西。

Answer 2

我解决了这个问题。这些行CN和return highlightTest != null ? highlightTest["in"]() : void 0;存在问题。应该是另一个论点。

函数不是AngularJS中的函数

2 个答案: