Question

我试图将 $ q 注入我的指令，但 $ q 被定义为解析器（） at at首先，在调用函数时，它是未定义的。也许与绑定相关的东西？我不知道。

(function () {
'use strict';
  myForm.$inject = ["$q"];
  angular
    .module('myModule')
    .directive('myForm', myForm);

  function myForm($q) {
    return {
      restrict: 'EA',
      scope: {
        ngSubmitFunction: '&',
      },
      templateUrl: 'myTemplate',
      controllerAs: 'ctrl',
      controller: ["$scope", "$window", "$q", function ($scope, $window, $q) {
        var vm = this;
        vm.name = 'myForm';

        $scope.submitPromise = function(){};
        vm.ngSubmit = ngSubmit;
        function ngSubmit($form) {
          vm.submitDisabled = true;
          $form.$setSubmitted();
          if ($form.$valid) {
            $scope.submitPromise().then(function() {
                vm.submitDisabled = false;
            });
          }
        }
      }],
      link: function (scope, element, attrs) {
        console.log($q);
        scope.submitPromise = function($q) {
            console.log($q);
            var deferred = $q.defer();
            scope.ngSubmitFunction();
            return deferred.promise;
        }
      }
    };
  }
}());

目标是在用户点击按钮时调用 ngSubmit 。 ngSubmit 禁用该按钮，等待异步调用结束，然后启用该按钮。

在示例代码中，第一个 console.log（$ q）（在加载页面时执行）输出：

Q（解析器）{ if（！isFunction（resolver））{ 抛出$ qMinErr（＆＃39; norslvr＆＃39;，＆＃34;预期的resolverFn，得到＆＃39; {0}＆＃39;＆＃34;，resolver）; } ...

对我来说，这看起来是正确的。但是在按下按钮后调用 submitPromise（）时，这是输出：

未定义

TypeError：无法读取属性＆＃39;延迟＆＃39;未定义的

$ q 何时丢失？

注意：这不是我尝试的唯一版本，最初所有代码都在控制器上，链接上没有任何内容。我也被告知这种模式已被弃用并使用此模式，这更好：

function submitPromise($q) {
  return $q(function (resolve) {
    $scope.ngSubmitFunction();
  })
}

没有任何效果。一切都产生相同的错误，$ q在某些时候未定义，无法找出原因。

Answer 1

使用$q作为参数参数会导致$q变为未定义。

  myForm.$inject = ["$q"];
  angular
    .module('myModule')
    .directive('myForm', myForm);

  function myForm($q) {
    return {
      link: function (scope, element, attrs) {
        console.log($q);
        //scope.submitPromise = function($q) {
        //Remove $q as parameter
        scope.submitPromise = function() {
            console.log($q);
            var deferred = $q.defer();
            //scope.ngSubmitFunction();
            deffered.resolve(scope.ngSubmitFunction());
            return deferred.promise;
        }
      }

myForm函数是一个指令构造函数，AngularJS框架将向其注入服务提供者。但submitPromise函数不可注射;它是myForm的子函数。所有注射都应在父功能中完成。

此外，使用$q.when创建承诺可以简化代码。

  link: function (scope, element, attrs) {
    console.log($q);
    //scope.submitPromise = function($q) {
    //Remove $q as parameter
    scope.submitPromise = function() {
        console.log($q);
        return $q.when(scope.ngSubmitFunction());
    }
  }

Answer 2

正确的代码是（我从函数声明中删除了参数）：

$scope.submitPromise=function() {

  return $q(function (resolve) {//$q is available in function declared in the same scope
    $scope.ngSubmitFunction();
  });

}

上面的代码使用范围内的$q变量（javascript范围而非angular $ scope），$q对于 myForm函数中声明的所有函数都是可见的。

您之前的代码使用的功能参数不是范围的$q，参数未通过，因此未定义。

Javascript范围表示开放标记 {和关闭标记} 之间的所有内容。检查此示例：

function(y){//scope start

  var x; //scope local variable

  var someFunc=function(){

   //here is available y and x variables

  };

  //scope end
}

//outside of scope - here variables x and y not exists

Answer 3

你应该用这种不同的注射来解决

(function () {
'use strict';

  angular
    .module('myModule')
    .directive('myForm', ['$q', function($q){

      return {
        . . .
      }

  }]);

希望我一直很有帮助。

AngularJS - $ q在指令中未定义

3 个答案: