如何 return 使用 $resource 向 angularjs 中的指令承诺表单控制器

Question

我希望承诺从控制器返回到指令，因为我想根据收到的承诺更改模板。

登录控制器：

(function() {
  angular.module('nd')
    .controller('LoginController', loginController);

  function loginController(
    $scope,
    modelFactory,
    User,
    APPLICATION,
    REST_URL,
    $resource
    ) {

    $scope.user = modelFactory.create('user', User);

    $scope.login = login;

    function login() {
      var resource = $resource(APPLICATION.host + REST_URL.login);
      var promise = resource.save($scope.user);
      return promise;
    }
  }
})();

按钮指令：

(function() {
  angular.module('nd')
    .directive('ndButton', button);

  function button() {
    return {
      restrict: 'E',
      scope: {
        ndLable: '@',
        ndClick: '&'
      },
      templateUrl: '../components/fields/button/button.template.html',
      link: link
    };

    function link(scope) {
      scope.clickButton = function() {
        var promise = scope.ndClick();
        promise.$promise.then(function(user) {
          console.log(user);
        });
      };
    }
  }
})();

login.html :

<form ng-submit="login()">
  <div class="input-container">
    <nd-text-box
      ng-model="user.username"
      nd-lable="Username"
      nd-id="Username"
      nd-required="required"></nd-text-box>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <nd-password
      ng-model="user.password"
      nd-lable="Password"
      nd-id="Password"
      nd-required="required"></nd-password>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <nd-button nd-lable="Go"></nd-button>
  </div>
  <div class="footer"><a href="#">Forgot your password?</a></div>
</form>

按钮模板：

<button ng-click="clickButton()">
  <span>{{ndLable}}</span>
</button>

在指令中，在scope.ndClick()处调用控制器的函数login()。在控制器中，我得到 promise 作为 { $promise: Promise, $resolved: false }。我在指令中返回 promise，但在指令中我得到未定义的承诺。

Answer 1

我不能告诉你为什么你收到 undefined 作为 return 值。我创建了一个 fiddle 并得到了相同的结果。我认为这是一个范围问题。也许其他人可以解释它。但是我建议使用工厂或服务来存储用户数据，这样您就可以在整个应用程序中使用它。这是一个 fiddle，它使用工厂在多个控制器和 directive/component 之间共享数据：https://jsfiddle.net/trollr/rjuvagb9/

否则，您可以向指令范围添加额外的双向绑定以同步数据。

function button() {
  return {
    restrict: 'E',
    scope: {
      ndLable: '@',
      ndClick: '&', 
      ndPromise: '='
    },
    templateUrl: '../components/fields/button/button.template.html',
    link: link
};

模板：

<button nd-promise="loginPromise" nd-click"login()">..</button>

控制器：

function login() {
  var resource = $resource(APPLICATION.host + REST_URL.login);
  $scope.loginPromise = resource.save($scope.user).$promise;
}

Answer 2

login.html

<div class="button-container">
    <nd-button nd-lable="Go" ndClick="login()"></nd-button>
</div>

将 $scope.login 方法绑定到 ndClick

如何 return 使用 $resource 向 angularjs 中的指令承诺表单控制器

How to return promise form controller to directive in angularjs using $resource

angularjs

angular-promise

angular-resource

angular-directive

angular-controller