How can I pass a variable between angularjs views? - angularjs

Question

I have a .slim file with AngularJS code. In this file, there's different views.
In the upload view, I have two radio buttons and I would like to keep the value of the radio selected in my edit view.
I read that I need a service, but I don't know Angular (and i'm pretty bad with javascript) so it's a bit difficult to understand and know what I have to do...
This is my whole view:
.gr-picture-upload-modal.modal.fade data-backdrop="static"
.modal-dialog
.modal-content data-ng-controller="PictureUploadCtrl" data-ng-if="view == 'upload'"
.modal-header
button type="button" class="close" data-ng-click="cancel()" ×
h4.modal-title= t('views.shared.picture_upload_modal.title')
.modal-body.picture-upload
.picture-upload-dropbox data-ng-model="files" data-ngf-drop=true data-ngf-drag-over-class="'dragover'" data-ngf-multiple="true" data-ngf-allow-dir="false" data-accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp"
= t('views.shared.picture_upload_modal.drag_and_drop_or')
button type="button" class="btn-link" data-ngf-select="true" data-ng-model="files" data-ngf-multiple="true" data-accept="image/jpeg,image/jpg,image/png,image/gif,image/bmp"
= t('views.shared.picture_upload_modal.select')
= t('views.shared.picture_upload_modal.one_or_more_image')
p.picture-upload-hint= t('views.shared.picture_upload_modal.hints')
.list-group.picture-upload-list-group data-ng-show="pictures.length > 0"
.list-group-item data-ng-repeat="picture in pictures"
.row
.col-xs-8
img.picture-upload-thumbnail data-ngf-src="picture" alt="{{picture.name}}"
span.picture-upload-filename data-ng-hide="picture.upload.aborted || picture.errors" data-ng-bind="picture.name"
span.picture-upload-error.text-warning data-ng-show="picture.upload.aborted"= t('views.shared.picture_upload_modal.upload_aborted')
span.picture-upload-error.text-danger data-ng-show="picture.errors" data-ng-bind="picture.errors[0]"
.col-xs-3
.progress.picture-upload-progress data-ng-show="picture.progress >= 0"
.progress-bar data-ng-class="progressClass(picture)" style="width:{{picture.progress}}%;"
.col-xs-1
button.btn-link.picture-upload-abort type="button" title=t('views.application.buttons.cancel') data-ng-hide="picture.upload == null || picture.progress == 100 || picture.upload.aborted" data-ng-click="picture.upload.abort();picture.upload.aborted=true" ×
.modal-footer data-ng-show="pictures.length > 0"
div data-ng-if="successUpload > 0"
.row
.col-xs-4
p.pull-left= t('views.shared.picture_upload_modal.position')
.radio-inline
label
input type="radio" ng-model="position" value="first"= t('views.shared.picture_upload_modal.first_position')
.radio-inline
label
input type="radio" ng-model="position" value="last"= t('views.shared.picture_upload_modal.last_position')
.col-xs-8
button type="button" class="btn btn-primary pull-right" data-ng-disabled="uploading != 0" data-ng-click="editView()"= t('views.application.buttons.done')
div data-ng-if="successUpload == 0"
a.btn.btn-primary.pull-right href="" data-ng-class="{'disabled': (uploading != 0)}" data-ng-click="done('#{user_pictures_path(current_user.username)}')"
= t('views.application.buttons.done')
.modal-content data-ng-if="view == 'edit'"
.modal-header
.btn-toolbar.pull-right
.btn-group
button type="button" class="btn btn-default" data-ng-disabled="navIndex <= 0 || loading" data-ng-click="prevPicture()"
span.icon.icon-arrow-left
button type="button" class="btn btn-default" data-ng-disabled="navIndex >= (pictures.length - 1) || loading" data-ng-click="nextPicture()"
span.icon.icon-arrow-right
a.btn.btn-default href="" data-ng-class="{'disabled': loading}" data-ng-click="done('#{user_pictures_path(current_user.username)}')"
= t('views.application.buttons.done')
h4.modal-title #{t('views.shared.picture_upload_modal.new_image')} ({{navIndex + 1}}/{{pictures.length}})
.modal-body
form data-ng-submit="update(editPicture)"
.container-fluid
.row
.col-xs-12.col-md-4
.thumbnail.picture-upload-edit-thumbnail data-ng-style="{'background-image' : 'url(' + editPicture.image.thumbnail + ')'}"
.col-xs-12.col-md-8
.form-group data-ng-class="{'has-error': editPicture.errors['title']}"
label.control-label for="picture_title"= t('picture.labels.title')
input.form-control type="text" id="picture_title" name="picture[title]" data-ng-model="editPicture.title" autocomplete="off" maxlength="50"
span.help-block data-ng-bind="editPicture.errors['title'][0]"
.form-group data-ng-class="{'has-error': editPicture.errors['category_id']}"
label.control-label for="picture_category_id"= t('picture.labels.category')
- cache('categories._picture_upload_modal.select_tag', skip_digest: true) do
= select_tag 'category', options_for_select(Category.order(name: :asc).all.collect { |c| [c.name, c.id] }), id: 'picture_category_id', class: 'form-control', include_blank: true, data: { ng_model: 'editPicture.category_id' }
span.help-block data-ng-bind="editPicture.errors['category_id'][0]"
.form-group data-ng-class="{'has-error': editPicture.errors['description']}"
label.control-label for="picture_description"= t('picture.labels.description')
textarea.form-control id="picture_description" name="picture[description]" data-ng-model="editPicture.description" maxlength="800"
span.help-block data-ng-bind="editPicture.errors['description'][0]"
.form-group data-ng-class="{'has-error': editPicture.errors['tags_string']}"
label.control-label for="picture_tags_string" = t('picture.labels.tags_string')
input.form-control type="text" id="picture_tags_string" name="picture[tags_string]" data-ng-model="editPicture.tags_string" autocomplete="off" placeholder=t('picture.placeholders.tags_string')
span.help-block data-ng-bind="editPicture.errors['tags_string'][0]"
.form-group data-ng-class="{'has-error': editPicture.errors['license']}"
label.control-label for="picture_license"= t('picture.labels.license')
= select_tag 'license', options_for_select(t('picture.labels.licenses').collect { |k, v| [v, k] }), id: 'picture_license', class: 'form-control', include_blank: true, data: { ng_model: 'editPicture.license' }
span.help-block data-ng-bind="editPicture.errors['license'][0]"
.btn-toolbar.pull-right
button type="submit" class="btn btn-primary" name="commit" data-ladda="loading" data-style="expand-right"= t('helpers.submit.submit')
button type="button" class="btn btn-default" data-ng-class="{'disabled': loading}" data-ng-show="navIndex >= (pictures.length - 1)"
= link_to t('views.application.buttons.done'), URI::unescape(user_pictures_path(current_user.username, picturesNb: '{{pictures.length}}', position: '{{position}}'))
This is my radio buttons:
.radio-inline
label
input type="radio" ng-model="position" value="first"= t('views.shared.picture_upload_modal.first_position')
.radio-inline
label
input type="radio" ng-model="position" value="last"= t('views.shared.picture_upload_modal.last_position')
And this is where I want the value of the radio selected:
button type="button" class="btn btn-default" data-ng-class="{'disabled': loading}" data-ng-show="navIndex >= (pictures.length - 1)"
= link_to t('views.application.buttons.done'), URI::unescape(user_pictures_path(current_user.username, picturesNb: '{{pictures.length}}', position: '{{position}}'))
Also, this is my controller:
App.controller 'PictureUploadCtrl', ['$scope', '$rootScope', 'Upload', 'newPictures', ($scope, $rootScope, Upload, newPictures)->
$scope.pictures = []
$scope.uploading = 0
$scope.successUpload = 0
$scope.position = 'last'
$scope.$watch 'files', (files)->
if files and files.length
for file in files
$scope.pictures.push(file)
$scope.upload file
null
$scope.upload = (picture)->
$scope.uploading += 1
picture.upload = Upload.upload({
url: '/pictures',
data: { picture: { image: picture }}
}).progress((event)->
picture.progress = Math.min(100, parseInt(100.0 * event.loaded / event.total))
).success((data, status, headers, config)->
picture.id = data.picture.id
newPictures.add(data.picture)
$scope.uploading -= 1
$scope.successUpload += 1
).error((data, status, headers, config)->
if data is null
null
else if data.errors.base?
picture.errors = data.errors.base
else if data.errors.image?
picture.errors = data.errors.image
else if data.errors.image_fingerprint?
picture.errors = data.errors.image_fingerprint
$scope.uploading -= 1
)
$scope.cancel = ->
for picture in $scope.pictures
if picture.progress < 100 and not picture.upload.aborted
picture.upload.abort()
picture.upload.aborted = true
$scope.closeModal()
$scope.pictures = []
$scope.uploading = 0
$scope.successUpload = 0
$scope.progressClass = (picture)->
if picture.upload.aborted
'progress-bar-warning'
else if picture.progress == 100 and picture.errors?
'progress-bar-danger'
else if picture.progress == 100
'progress-bar-success'
else
''
]
Could you explain to me how can I keep the value of {{position}} between the views?
EDIT:
Well, I edited a service and added the position:
App.factory 'newPictures', ->
return {
pictures: []
position: 'last'
add: (picture)->
#pictures.push(picture)
clear: ->
#pictures = []
}
Then, in the directive, I just added the $scope.position
$scope.editView = ->
$scope.pictures = newPictures.pictures
$scope.position = newPictures.position
$scope.editPicture = $scope.pictures[0]
$scope.view = 'edit'
in my controller:
$scope.setPosition = (position) ->
$scope.position = position
newPictures.position = position
And I edited my view to add ng-change:
.row
.col-xs-4
p.pull-left= t('views.shared.picture_upload_modal.position')
.radio-inline
label
input type="radio" ng-model="position" data-ng-change="setPosition('first')" value="first"= t('views.shared.picture_upload_modal.first_position')
.radio-inline
label
input type="radio" ng-model="position" data-ng-change="setPosition('last')" value="last"= t('views.shared.picture_upload_modal.last_position')
I'm not sure if it's a clean way to do what I want but it works