如何使用 $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

登录.html

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

将$scope.login方法绑定到ndClick

Answer 2

我不能告诉你为什么你会收到 undefined 作为返回值。我创建了一个小提琴并得到了相同的结果。我认为这是一个范围问题。也许其他人可以解释它。但是我建议使用工厂或服务来存储用户数据，这样您就可以在整个应用程序中使用它。这是一个使用工厂在多个控制器和指令/组件之间共享数据的小提琴：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;
}