Как вернуть контроллер формы обещания в директиву в 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; 
}