Как вернуть контроллер формы обещания в директиву angularjs, используя $resource

Question

Я хочу, чтобы обещание было возвращено из контроллера в директиву, так как я хочу изменить шаблон на основе полученного обещания.

LoginController:

(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

login.html

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

Привязать $scope.login метод для ndClick

Answer 2

Я не могу сказать вам, почему вы получаете неопределенное в качестве возвращаемого значения. Я создал скрипку и получил тот же результат. Я думаю, что это проблема масштаба. Может быть, кто-то еще может это объяснить. Однако я бы предложил использовать фабрику или сервис для хранения пользовательских данных, чтобы вы могли использовать их во всем приложении. Вот скрипка, которая использует фабрику для обмена данными между несколькими контроллерами и директивой / компонентом: 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;
}