javascript - scope array in angularjs is undefined -
i building angularjs app have issue $scope var.
i have following definition:
$scope.data = { object: { id: undefined, name: undefined, category: { id: undefined, name: undefined }, description: undefined, featured: 1, seassons: undefined }, progress: 0, emptyresponse : false }; the issue when tried set property $scope.data.object.name following error in console: typeerror: cannot set property 'name' of undefined. there way initialize arrays inside $scope var? tried
$scope.data.object = [] which works, in scope of function, , if call function again lose previous data. there way this? way works, if set value of property view through ng-model, in cases need logic in controller.
the controller correctly defined
function videocreatecontroller($scope,....) full controller, method failing isvalid, if execute create function without completing fields in view (when tried assign values undefined)
(function() { 'use strict'; angular .module('naut') .controller('videocreatecontroller', videocreatecontroller); function videocreatecontroller($scope, $rootscope, $location, $state, sessionservice, programfactory, seassonfactory, videofactory, categoryfactory, subcategoryfactory, $filter, ngtableparams, sweetalert, $routeparams, $translate){ var vm = this; $rootscope.baseurl = "#/app/video/"; $scope.data = { object: { id: undefined, name: undefined, category: { id: undefined, name: undefined }, description: undefined, featured: 1, belongtoprogram: false, isfeatured: false, adv: false, images: undefined, preview: undefined, categories: undefined, subcategories: undefined, programs: undefined, episode: undefined, seassons: undefined }, progress: 0, videosubmitted: false, uploading: false, errormessage: undefined, error: false, emptyresponse : false }; $scope.image = null; $scope.imagefilename = ''; $scope.uploadme = {}; $scope.uploadme.src = ''; var obj = []; $scope.data.object = obj; $scope.getinformation = function() { $rootscope.$emit('load'); categoryfactory.getall() .then(function(response){ programfactory.getall() .then(function(programresponse){ if (response.success && programresponse.success) { $scope.data.object.categories = response.data; $scope.data.object.subcategories = null; $scope.data.object.programs = programresponse.data; $scope.data.object.seassons = null; console.log($scope.data.object); } else if(response.code == "error__not_authorized") { $location.path('/notauthorized'); } else { $scope.data.error = true; $scope.data.errormessage = response.code; } $rootscope.$emit('unload'); }, function(response){ if (response == null) { $scope.data.error = true; $scope.data.errormessage = "error__server_non_working"; } else { $scope.data.error = true; $scope.data.errormessage = response.message; } $rootscope.$emit('unload'); }); }); } $scope.getsubcategories = function(id) { $rootscope.$emit('load'); subcategoryfactory.getall(id) .then(function(response){ console.log(response); if (response.success) { $scope.data.object.subcategories = response.data; console.log($scope.data.object); } else if(response.code == "error__not_authorized") { $location.path('/notauthorized'); } else { $scope.data.error = true; $scope.data.errormessage = response.code; } $rootscope.$emit('unload'); }, function(response){ if (response == null) { $scope.data.error = true; $scope.data.errormessage = "error__server_non_working"; } else { $scope.data.error = true; $scope.data.errormessage = response.message; } $rootscope.$emit('unload'); }); } $scope.getseassons = function(id) { $rootscope.$emit('load'); seassonfactory.getall(id) .then(function(response){ console.log(response); if (response.success) { $scope.data.object.seassons = response.data; } else if(response.code == "error__not_authorized") { $location.path('/notauthorized'); } else { $scope.data.error = true; $scope.data.errormessage = response.code; } $rootscope.$emit('unload'); }, function(response){ if (response == null) { $scope.data.error = true; $scope.data.errormessage = "error__server_non_working"; } else { $scope.data.error = true; $scope.data.errormessage = response.message; } $rootscope.$emit('unload'); }); } $scope.isvalid = function() { var valid = true; if(!$scope.data.object.name) valid = false; if(!$scope.data.object.description) valid = false; if(!$scope.data.object.subcategory) valid = false; if($scope.data.object.belongtoprogram && !$scope.data.object.episode && !$scope.data.object.seasson) valid = false; return valid; } $scope.create = function(isvalid) { if (isvalid) { $rootscope.$emit('load'); var params = { id: $scope.data.object.id, name: $scope.data.object.name, preview: $scope.data.object.preview, adv: $scope.data.object.adv, featured: $scope.data.object.featured, description: $scope.data.object.description, episode: $scope.data.object.episode, subcategory: { id: $scope.data.object.subcategory.id }, seasson: { id: $scope.data.object.seasson !== undefined ? $scope.data.object.seasson.id : null } }; if(!$scope.data.object.isfeatured) params.featured = 0; videofactory.create(params).then(function(response){ if (response.success) { $state.go('app.video_index'); } else { $scope.data.error = true; $scope.data.errormessage = response.code; } $rootscope.$emit('unload'); }, function(response){ if (response == null) { $scope.data.error = true; $scope.data.errormessage = "error__server_non_working"; } else { $scope.data.error = true; $scope.data.errormessage = response.code; } $rootscope.$emit('unload'); }); }; } $scope.selected = function(image) { $scope.data.object.preview = image.source; } var callback = function(e){ $scope.$apply(function(){ $scope.data.progress = math.round(e.loaded / e.total * 100); }); }; $scope.reset = function() { $scope.data.object.id = undefined; $scope.data.object.images = undefined; $scope.data.object.source = undefined; $scope.data.object.preview = undefined; $scope.data.object.description = undefined; $scope.data.videosubmitted = false; $scope.data.object.name = undefined; $scope.data.uploading = false; }; $scope.upload = function(item) { $scope.data.videosubmitted = true; $scope.data.object.name = item.name.substr(0, item.name.lastindexof('.')); $scope.data.uploading = true; var params = { files: item }; videofactory.save(params, callback).then(function(response){ response = json.parse(response); $scope.data.uploading = false; if (response.success) { $scope.data.object.id = response.data.id; $scope.data.object.images = response.data.images; $scope.data.object.source = response.data.source; $scope.data.object.preview = response.data.preview; } else { $scope.data.error = true; $scope.data.errormessage = response.code; } }, function(response){ if (response == null) { $scope.data.error = true; $scope.data.errormessage = "error__server_non_working"; } else { $scope.data.error = true; $scope.data.errormessage = response.code; } $scope.data.uploading = false; }); } $scope.getinformation(); } })(); view:
<div ng-controller="videocreatecontroller controller" nv-file-drop="" uploader="uploader" filters="queuelimit, customfilter"> <a ng-href="{{baseurl}}index" class="mr btn btn-labeled btn-default"> <span class="btn-label"><i class="fa fa-arrow-left"></i> </span><span translate="page.back" class="nopadding"></span></a> <div class="app-view-header"> <span translate="page.create" class="nopadding"></span><small><span translate="modules.video.a-video" class="nopadding"></span></small> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"><h1><span translate="modules.video.create" class="nopadding"></span></h1></div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form role="form" name="data" class="mb-lg" ng-submit="create(data.$valid)" novalidate> <div class="row" ng-show="data.error"> <div class="col-md-12"> <div class="alert ng-isolate-scope alert-danger alert-dismissable" ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissable' : null]" role="alert" type="danger"> <div> <span class="ng-binding ng-scope"><span translate="error.{{data.errormessage}}" class="nopadding"></span></span> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="row" ng-show="!data.videosubmitted"> <div class="col-md-10 no-padding-right"> <div class="dropzone" id="dropbox" callback-fn="upload(video)" file-dropzone="[video/mp4, video/3gpp, video/quicktime, video/x-msvideo, video/x-ms-wmv]" file="image" file-name="imagefilename" data-max-file-size="3000"> <span translate="modules.video.dropvideo"></span> </div> </div> <div class="col-md-2 upload-btn no-padding-left"> <label class="upload-search btn btn-primary no-padding"> <div> <input type="file" onchange="angular.element(this).scope().upload(this.files[0])"/> <i class="fa fa-upload"></i> <span translate="common.filesearch"></span> </div> </label> </div> </div> <div class="video-data" ng-show="data.videosubmitted"> <div class="row"> <div class="col-md-8"> <div class="row margin-bottom-small"> <div class="col-md-6"> <div class="form-group"> <label for="name" class="col-sm-2 control-label" translate="common.name"></label> <div class="col-sm-10"> <input id="name" ng-model="data.object.name" type="text" required ng-class="{ 'has-error' : data.object.name.$invalid && !data.object.name.$pristine }" ng-minlength="2" class="form-control"> </div> </div> </div> </div> <div class="row margin-bottom-small"> <div class="col-md-6"> <div class="form-group"> <div class="row"> <div class="col-md-12"> <label for="name" class="col-sm-2 control-label" translate="modules.category.category"></label> <div class="col-sm-10"> <ui-select ng-model="data.object.category" ng-change="getsubcategories(data.object.category.id)" class="text-left"> <ui-select-match placeholder="select category...">{{data.object.category.name}}</ui-select-match> <ui-select-choices repeat="item in data.object.categories"> <span ng-bind-html="item.name"></span> </ui-select-choices> </ui-select> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="name" class="col-sm-2 control-label" translate="modules.subcategory.subcategory"></label> <div class="col-sm-10"> <ui-select ng-model="data.object.subcategory" class="text-left"> <ui-select-match placeholder="select category...">{{data.object.subcategory.name}}</ui-select-match> <ui-select-choices repeat="item in data.object.subcategories"> <span ng-bind-html="item.name"></span> </ui-select-choices> </ui-select> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="checkbox c-checkbox pull-left mt0"> <label class="col-md-12"> <input type="checkbox" ng-model="data.object.belongtoprogram" id="belongtoprogram" value="" /> <span class="fa fa-check checkbox-margin"></span><label for="belongtoprogram" class="nopadding" translate="modules.video.inprogram"></label> </label> </div> </div> </div> <div class="row margin-bottom-small" ng-show="data.object.belongtoprogram"> <div class="col-md-4"> <div class="form-group"> <div class="row"> <div class="col-md-12"> <label for="name" class="col-sm-2 control-label" translate="modules.program.program"></label> <div class="col-sm-10"> <ui-select ng-model="data.object.program" ng-change="getseassons(data.object.program.id)" class="text-left"> <ui-select-match placeholder="select program...">{{data.object.program.name}}</ui-select-match> <ui-select-choices repeat="item in data.object.programs"> <span ng-bind-html="item.name"></span> </ui-select-choices> </ui-select> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="name" class="col-sm-2 control-label" translate="modules.seasson.seasson"></label> <div class="col-sm-10"> <ui-select ng-model="data.object.seasson" class="text-left"> <ui-select-match placeholder="select seasson...">{{data.object.seasson.name}}</ui-select-match> <ui-select-choices repeat="item in data.object.seassons"> <span ng-bind-html="item.name"></span> </ui-select-choices> </ui-select> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="name" class="col-sm-2 control-label" translate="modules.video.episode"></label> <div class="col-sm-4"> <input ng-model="data.object.episode" type="number" ng-class="{ 'has-error' : data.object.episode.$invalid && !data.object.episode.$pristine }" ng-minlength="1" ng-maxlength="3" class="form-control"> </div> </div> </div> </div> <div class="row margin-bottom-small"> <div class="col-md-12"> <div class="form-group"> <label for="name" class="col-sm-12 control-label" translate="modules.video.description"></label> <div class="col-sm-12"> <div text-angular="" ng-model="data.object.description" name="data.object.description" class="btn-group-small"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="checkbox c-checkbox pull-left mt0"> <label class="col-md-12"> <input type="checkbox" ng-model="data.object.adv" id="adv" value="" /> <span class="fa fa-check checkbox-margin"></span><label for="adv" class="nopadding" translate="modules.video.advertisement"></label> </label> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="checkbox c-checkbox pull-left mt0"> <label class="col-md-12"> <input type="checkbox" ng-model="data.object.isfeatured" id="isfeatured" value="" /> <span class="fa fa-check checkbox-margin"></span><label for="isfeatured" class="nopadding" translate="modules.video.featured"></label> </label> </div> </div> </div> <div class="row margin-bottom-small" ng-show="data.object.isfeatured"> <div class="col-md-6"> <div class="form-group"> <label for="name" class="col-sm-2 control-label" translate="modules.video.order"></label> <div class="col-sm-4"> <input ng-model="data.object.featured" type="number" ng-class="{ 'has-error' : data.object.featured.$invalid && !data.object.featured.$pristine }" ng-minlength="1" ng-maxlength="2" class="form-control"> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-12"> <div ng-show="data.uploading"> <progressbar value="data.progress" class="progress-striped active">{{data.progress}}%</progressbar> </div> </div> </div> <div class="row" ng-show="data.object.preview"> <div class="col-md-12"> <img class="img-responsive center" src="/app/videos/{{data.object.source}}/screenshots/{{data.object.preview}}"> </div> <div class="col-md-12"> <div ng-show="data.object.images != null"> <h5 class="page-header"><span translate="modules.video.select-preview"></span></h5> <div ng-repeat="image in data.object.images" class="col-lg-3"> <img class="img-thumbnail" ng-class="{ 'preview-selected': image.source == data.object.preview, 'preview-not-selected': image.source != data.object.preview }" ng-click="selected(image)" src="/app/videos/{{data.object.source}}/screenshots/{{image.source}}"> </div> </div> </div> </div> </div> </div> <hr /> <div class="row"> <div class="col-md-12 text-right"> <button type="reset" class="btn btn-labeled btn-danger" ng-click="reset()"> <span class="btn-label"><i class="fa fa-times"></i> </span><span translate="page.reset" class="nopadding"></span> </button> <button ng-disabled="data.$invalid && !isvalid()" type="submit" class="btn btn-labeled btn-success"> <span class="btn-label"><i class="fa fa-check"></i> </span><span translate="page.create" class="nopadding"></span> </button> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div>
i found solution. issue parameter using in controller has same name de form using in view. after change form name, issue fixed.
Comments
Post a Comment