angularjs中的scope数组是未定义的

时间:2016-05-28 23:43:31

标签: javascript angularjs scope angularjs-scope

我正在构建一个angularjs应用程序,但我遇到了$ scope var。

的问题

我有以下定义:

$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时,我在控制台中收到以下错误:TypeError:无法设置undefined的属性'name'。 有没有办法初始化$ scope var中的数组?我试过了

$scope.data.object = [] 

可以工作,但只是在该函数的范围内,如果我再次调用该函数,我将丢失以前的数据。 有没有办法做到这一点?另一种方法是,如果我通过ng-model从视图中设置该属性的值,但在某些情况下我需要在我的控制器中执行一些逻辑。

控制器已正确定义

function VideoCreateController($scope,....)

完全控制器,失败的方法是IsValid,但是如果我执行Create函数而没有在视图中完成某些字段(当我尝试分配这些值时,我得到了未定义)

(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>

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。问题是我在控制器中使用的参数与我在视图中使用的de form具有相同的名称。更改表单名称后,问题已修复。