-1
我正在構建一個angularjs應用程序，但是我有一個$ scope var的問題。在angularjs中的作用域數組是undefined
我有以下定義：
$scope.data = {
object: {
id: undefined,
name: undefined,
category:
{
id: undefined,
name: undefined
},
description: undefined,
featured: 1,
seassons: undefined
},
progress: 0,
emptyResponse : false
};
的問題是，當我試圖設置屬性$ scope.data.object.name我得到控制檯以下錯誤：類型錯誤：無法設置屬性「名字'未定義。 是否有任何方法來初始化$ scope var內的數組？我試過
$scope.data.object = []
它的工作原理，但只是在該功能的範圍內，如果我再次調用該函數，我將失去以前的數據。 有沒有辦法做到這一點？另一種做法是，如果我通過ng-model從視圖中設置該屬性的值，但在某些情況下，我需要在控制器中執行一些邏輯。
控制器被正確定義
function VideoCreateController($scope,....)
全控制器，即故障是IsValid的方法，但也如果我執行，而不在視圖中完成某些字段（當我試圖分配這些值創建函數我得到了一個未定義）
(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();
}
})();
查看：
<div ng-controller="VideoCreateController as 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 a 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 a 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 a 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 a 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>
如果您向控制器顯示導致問題的相關代碼，將會有所幫助。 –
請參閱[mcve]。我們沒有足夠的證據來重現或正確分析問題。顯示所有相關的代碼 – charlietfl
嗨，@JimCote和charlietfl我剛剛添加了控制器和視圖。請讓我知道，如果你看到任何奇怪的。這是我的第一個angularjs應用程序，所以除了我的問題之外，也許你有一些最佳實踐與我分享，我不在這裏。 – Faabass