Develop Reference

How do I return promise to satisfy the directive?

I have the following code and I have tried just bout everything to return a promise that would work with the directive. I have even tried returning the response data and return $q.when(data) and nothing. Ive tried reading on promises and this one is a bit different then Ive read. Something I'm missing?
myApp.controller('smsCtrl', function($scope){
$scope.sendSMS = function(){
let sms = {'number': $scope.number ,'message': $scope.message};
serviceNameHere.sendSMS(sms).then(function(response){
$scope.smsSuccessMsg = "Message Sent Successfully";
}, function(response){
$scope.smsErrorMsg = response.data['message'];
});
};
})
myApp.directive('onClickDisable', function() {
return {
scope: {
onClickDisable: '&'
},
link: function(scope, element, attrs) {
element.bind('click', function() {
element.prop('disabled',true);
scope.onClickDisable().finally(function() {
element.prop('disabled',false);
})
});
}
};
});
The following html
<div ng-controller="smsCtrl">
<-- field inputs here --></-->
<button type="button" class="btn btn-primary" on-click-disable="sendSMS()">SEND</button>
</div>
JSfiddle Example

There is no need to have a special directive for this. Simply use ng-disabled and ng-click:
<div ng-controller="smsCtrl">
<!-- field inputs here -->
<button ng-click="sendSMS()" ng-disabled="pendingSMS">
SEND
</button>
</div>
In the controller:
myApp.controller('smsCtrl', function($scope, serviceNameHere){
$scope.sendSMS = function(){
let sms = {'number': $scope.number ,'message': $scope.message};
$scope.pendingSMS = true;
serviceNameHere.sendSMS(sms).then(function(response){
$scope.smsSuccessMsg = "Message Sent Successfully";
}, function(response){
$scope.smsErrorMsg = response.data['message'];
}).finally(function() {
$scope.pendingSMS = false;
});
};
})
When the SMS message starts, the controller sets the pendingSMS flag to disable the Send button. When the service completes, the flag is reset and the button is re-enabled.

Send values/parameters to uibModal angular

I have a page employee.html with a list of dependents and for each row (li) an inner button with the directive ng-click="editDependent({{dependent.id}})". That button tries to call a modal box.
The employee.html is loaded in a ui_view div from an index.html
I saw that each button in view source with chrome are correctly bound ng-click="editDepedent(1)" and so on.
But at the same time I have an error
angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=11&p3=editDependent(%7B%7Bdependent.id%7D%7D)&p4=%7Bdependent.id%7D%7D)
I'm trying to pass my dependent id to my modal and the previous scope also that contains the info about the employee. So how can I achieve this parameter passing?
This is my main controller
app.controller('EmployeeController', function ($scope, $stateParams, $uibModal, EmployeeService) {
if($stateParams.id){
EmployeeService.getEmployee($stateParams.id).then(function(employee){
$scope.employee = employee;
EmployeeService.setCurrentEmployee(employee);
});
}
$scope.editDependent = function(id){
if(id){
$scope.dependentid = id;
}
var uibModalInstance = $uibModal.open({
templateUrl : 'modal_dependent.html',
controller : 'DependentController',
scope: $scope
});
return uibModalInstance;
}
});
This is my dependent controller to catch the value
app.controller('DependentController', function($scope, $uibModal, $uibModalInstance, $stateParams, EmployeeService){
//Following line does not work because it gets the ID of employee which is passed by querystring
//var dependentID = $stateParams.id;
if($scope.dependentid){
var currentEmployee = EmployeeService.getCurrentEmployee();
//find the current dependent
for(var i = 0; i < currentEmployee.dependents.length; i++){
//*****************************************************
//Hardcoding 1 to test the dependent number 1 but it should be the dependent id parameter
if(currentEmployee.dependents[i].id == 1){
$scope.dependent = currentEmployee.dependents[i];
break;
}
}
}else{
$scope.dependent = { id : 0 };
}
$scope.editableDependent = angular.copy($scope.dependent);
//Submit button in modal
$scope.submitDependent = function(){
DependentService.saveDependent($scope.editableDependent);
$scope.dependent = angular.copy($scope.editableDependent);
$uibModalInstance.close();
}
});
UPDATE
employee.html
<form name="employee_form">
<div>
<h1> {{employee.name}} </h1>
<h3>Dependents</h3>
<button class="btn bgcolor-rb-main" x-ng-click="editDependent(0)">
Add new
</button>
<ul class="list-inline">
<li x-ng-repeat="dependent in employee.dependents">
<button x-ng-click="editDependent({{dependent.id}})">
Edit
</button><br>
<div>{{dependent.name}}</div>
</li>
</ul>
</div>
</form>
This is my modal_dependent.html
<div class="modal-header">
<h4>Dependent</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="txtName" x-ng-model="editableDependent.name" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" x-ng-click="discardChanges()">Discard</button>
<button type="submit" class="btn btn-primary" x-ng-click="submitDependent()">Save</button>
</div>
UPDATE
I changed my controller to initialize before $scope.dependent
app.controller('DependentController', function($scope, $uibModal, $uibModalInstance, $stateParams, EmployeeService){
//Following line does not work because it gets the ID of employee which is passed by querystring
//var dependentID = $stateParams.id;
$scope.dependent = { id : 0 };
if($scope.dependentid){
var currentEmployee = EmployeeService.getCurrentEmployee();
//find the current dependent
for(var i = 0; i < currentEmployee.dependents.length; i++){
//*****************************************************
//Hardcoding 1 to test the dependent number 1 but it should be the dependent id parameter
if(currentEmployee.dependents[i].id == 1){
$scope.dependent = currentEmployee.dependents[i];
break;
}
}
}
$scope.editableDependent = angular.copy($scope.dependent);
//Submit button in modal
$scope.submitDependent = function(){
DependentService.saveDependent($scope.editableDependent);
$scope.dependent = angular.copy($scope.editableDependent);
$uibModalInstance.close();
}
});
SOLVED
My button changed from this
<button x-ng-click="editDependent({{dependent.id}})">Edit</button>
To this
<button x-ng-click="editDependent(dependent.id)">Edit</button>

i think there is parsing error you have to define
$scope.dependentid = {};
before using it,
or otherwise you can use it as a model (if you are submitting a form on frontend like this)
<input type="hidden" ng-model="dependentid" />
it will be better to understand for me if you edit the code and add some frontend html

angular property visibility within html page

I have a simple angular page:
<div ng-controller="JoinGameController">
<table>
<tr ng-repeat="game in gameList">
<td>{{game}}</td>
<td> </td>
<td>select</td>
</tr>
</table>
<br/>
Selected game: {{selectedGameId}}
<br/>
Clear
<div ng-if="isGameSelected">
<p>To join this game put your name in the box and click the button</p>
<input type="text" ng-model="playerName">
<button ng-click="joinExistingGame()">Join Game</button>
<br/>
<p ng-if="playerAdded">{{addPlayerResponse}}</p>
</div>
</div>
my problem is that the player input box: ng-model="playerName">
doesn't provide the value when the button is clicked (binding doesn't work).
However it will work when I move it above the DIV element it belongs to.
Here is the controller of that page:
'use strict';
angular.module('pokerApp.joinGame', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/joinGame', {
templateUrl: 'joinGame/joinGame.html',
controller: 'JoinGameController'
});
}])
.controller('JoinGameController', ['$http', '$scope', function ($http, $scope) {
$http.get('http://localhost:8080/PokerGame-REST/allGames').success(function (response) {
$scope.gameList = response;
});
$scope.selectedGameId = null;
$scope.isGameSelected = false;
$scope.playerName = '';
$scope.playerAdded = false;
function selectGame(game) {
$scope.selectedGameId = game;
$scope.isGameSelected = true;
}
function clearSelection() {
$scope.selectedGameId = null;
$scope.isGameSelected = false;
}
function joinExistingGame() {
$http.get('http://localhost:8080/PokerGame-REST/addHand', {
params: {
gameId: $scope.selectedGameId,
name: $scope.playerName
}
}).success(function (response) {
$scope.playerAdded = true;
$scope.addPlayerResponse = response.addHand;
});
}
$scope.selectGame = selectGame;
$scope.clearSelection = clearSelection;
$scope.joinExistingGame = joinExistingGame;
}]);
What is the catch here?

You issue is that ng-if creates child scope so you cannot access your property inside the div with ng-if attribute.
you may try $parent.playerName

issue with using ng-if directive, that create own scope. So playerName added in this scope of ng-if directive.
Just create in main scope variable, like: player={}, and use it
<input type="text" ng-model="player.playerName">

Tab Through Hidden Inputs in Angular

I'm looking for a way in angular to tab through hidden inputs. So I have multiple input forms but when not on focus I want them to just display the text. I'm looking for the ability to once I've selected an input to tab through the other inputs even though they are currently hidden.
Any suggestions?

Use Angular directives to make your inputs into inline editors. When the page loads you'll be in display mode (i.e. the display div will be shown and the editor div will be hidden), then on clicking, the mode switches to Edit mode and the visibility is reversed.
Here's a quick snippet of what a DatePicker control would look like when wrapped in such a directive. Using Angular 1 and Bootstrap 3 (follows John Papa's Angular Style Guide):
HTML Template (inlineDatePicker.html):
<div class="inline-edit">
<div ng-if="!vm.inEditMode" data-ng-click="vm.enableEditMode()">
<input type="hidden" data-ng-model="vm.dateModel" data-ng-required="vm.dateRequired" /><span>{{vm.dateModel}}</span> <span class="glyphicon glyphicon-calendar"></span>
</div>
<div ng-if="vm.inEditMode">
<div class="well well-sm" style="position: absolute; z-index: 10">
<datepicker data-ng-model="vm.dateModel" data-show-weeks="false"></datepicker>
<button type="button" class="btn btn-sm btn-info" ng-click="vm.today()">Today</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="vm.cancel()">Cancel</button>
</div>
</div>
</div>
And the underlying directive (inlineDatePicker.directive.js):
(function () {
'use strict';
angular.module('myApp.inlineEdit')
.directive('inlineDatePicker', inlineDatePicker);
function inlineDatePicker() {
'use strict';
inlineDatePickerController.$inject = ['$scope', '$timeout'];
return {
restrict: 'A',
replace: true,
transclude: false,
templateUrl: '/App/inlineEdit/date/inlineDatePicker.html',
scope: {
dateModel: '=',
dateRequired: '#',
dateChanged: '&'
},
controller: inlineDatePickerController,
controllerAs: 'vm',
};
function inlineDatePickerController($scope, $timeout) {
/* jshint validthis:true */
var vm = this;
vm.inEditMode = false;
vm.dateModel = $scope.dateModel;
vm.dateRequired = $scope.$eval($scope.dateRequired);
vm.enableEditMode = enableEditMode;
vm.cancel = cancel;
vm.today = today;
function enableEditMode() {
vm.inEditMode = true;
}
function cancel() {
vm.inEditMode = false;
}
function today() {
vm.dateModel = new Date();
}
$scope.$watch('vm.dateModel', function (curr, orig) {
$scope.dateModel = vm.dateModel;
if (curr != orig && vm.inEditMode) {
$timeout($scope.dateChanged, 0);
}
vm.inEditMode = false;
});
$scope.$watch('dateModel', function () {
vm.dateModel = $scope.dateModel;
});
}
}
})();

Angularjs Modals and Promises control flow

I'm having some issues with the flow of my application. I'm trying to refresh a list when a new item has been created using a modal.
This is what the logic should be:
Hit new group button Modal shows up,
fill form Submit form, data is sent over to the service
Service creates the new group and calls the getGroup()
getGroups retrieves the new list of groups, the service resolves
After the service is done I need to set variables in my main ctrl so the DOM reflects the new change
HTML:
<div class="topPanel">
<div class="topRow">
<label for="entityDropDown">Select a Group:</label>
<select id="entityDropDown" ng-model="selectedGroup" ng-options="group as group.name for group in groups" ng-change="getGroupInfo(selectedGroup)"></select>
<button type="button" class="delGroupBtn btn-danger" ng-disabled="!selectedGroup" ng-click="deleteGroup()">✖</button>
<button type="button" class="delGroupBtn btn-success" ng-click="newGroup()">New Group</button>
</div>
<div class="userGroups" ng-show="selectedGroup">
<div>
<label for="entityAvailable">Available Users</label>
<select id="entityAvailable" multiple ng-model="selectedAvailableUsers" ng-options="u.name for u in availableUsers | orderBy: 'name'"></select>
</div>
<div id="moveButtons">
<button type="button" ng-disabled="!selectedGroup || availableUsers.length === 0 || selectedAvailableUsers.length === 0" ng-click="manageGroup(true)">Add to Group</button>
<button type="button" ng-disabled="!selectedGroup || assignedUsers.length == 0 || selectedAssignedUsers.length === 0" ng-click="manageGroup(false)">Remove from Group</button>
</div>
<div>
<label for="entityAssigned">Users In Group</label>
<select id="entityAssigned" multiple ng-model="selectedAssignedUsers" ng-options="u.name for u in assignedUsers | orderBy:'name'"></select>
</div>
</div>
<br class="clearfix" />
</div>
groupCtrl:
$scope.newGroup = function (){
var d = $q.defer();
var modalForm = '/Style%20Library/projects/spDash/app/partials/newGroup.html';
var modalInstance = $modal.open({
templateUrl: modalForm,
backdrop: true,
windowClass: 'modal',
controller: newGroupCtrl,
resolve:{
newGroup:function (){
return $scope.newGroup;
}
}
});
$scope.selectedGroup = false;
$scope.groups = groupService.getGroups();
d.resolve();
return d.promise;
};
/*At first I wanted to set newGroups to return a promise and then manipulate the $scope elements.But I got error then() is not a function of $scope.newGroup so I had to move the scope elements up into the function but now it runs before the service is even done. */
/*$scope.newGroup.then(function(){
$scope.selectedGroup = false;
$scope.groups = groupService.getGroups();
},
function(){
console.log('failed to create new group');
});*/
Modal newGroupCtrl:
var newGroupCtrl = function ($scope, $modalInstance, groupService){
$scope.newGroup = {};
$scope.submit = function(){
console.log('creating new group');
console.log($scope.newGroup);
$modalInstance.close($scope.newGroup);
}
$scope.cancel = function (){
$modalInstance.dismiss('Cancelled group creation');
};
$modalInstance.result.then(function (newGroup){
groupService.createGroup(newGroup);
}, function (reason){
console.log(reason);
});
}
createGroup Service function:
var createGroup = function (newGroup) {
var deferred = $q.defer();
var currentUser = $().SPServices.SPGetCurrentUser({
fieldName: "Name",
debug: false
});
var promise = $().SPServices({
operation: "AddGroup",
groupName: newGroup.name,
description: newGroup.desc,
ownerIdentifier: currentUser,
ownerType: "user",
defaultUserLoginName: currentUser,
})
promise.then(function (){
console.log('new group created');
getGroups();
deferred.resolve();
},
function(){
console.log('failed to create new group');
deferred.reject();
});
return deferred.promise;
}
Problem: How do I get the main controller to run functionsAFTER the createGroup service function has finished and returned it's promise?
For example, once the modal calls createGroup service function and that function updates my user list, I need to set these elements in the main groupCtrl:
$scope.selectedGroup = false;
$scope.groups = groupService.getGroups();