受け取った約束に基づいてテンプレートを変更したいので、コントローラーからディレクティブに約束を返したいです。
ログインコントローラー:
(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>
ディレクティブでは at 、コントローラのscope.ndClick()関数呼び出しです。login()コントローラーでは、私promiseは{ $promise: Promise, $resolved: false }. 私はpromiseディレクティブに戻っていますが、ディレクティブでは未定義の約束をしています。