$ scope在视图中未定义,但在控制器中未定义

时间:2017-02-23 17:52:29

标签: javascript html angularjs

我有$scope需要在国家/地区列表中选择显示iso代码。

因此,国家/地区列表正在获取一个$ http呼叫工厂,它会填充到一个范围内,到目前为止这么好了

///////// get countries ////////////////
tableFactory.getCountries().then(function(data){
  $scope.presentCountries = data;
});

presentCountries将被发送到typeahead,用户将在其中输入国家/地区并选择它,如下所示:

<div class="countrySearchField">
    <div class="row">
        <h3 class="searchTitle">Pick a country</h3>
    </div>
    <input type="text" class="form-control search-input" ng-model="countryPicked" uib-typeahead="presentCountry.name for presentCountry in presentCountries | filter:{name: $viewValue}:startsWith" typeahead-min-length="1" typeahead-on-select="onSelectCountry($item, $model, $label)" typeahead-editable="false"/>
</div>

一旦选中,它将调用范围函数onSelectCountry

$scope.onSelectCountry = function($item, $model, $label){
    $scope.brandCountryCode = $item.iso_code_2;
    // $scope.brandCountryCode = $item;
    console.log($scope.brandCountryCode);

}

我可以在console.log的控制台中看到数据$scope.brandCountryCode,但不能在模态视图(叠加视图)中看到。

<div class="row subtitleModalRow">
    <h5 class="unlock-description">Please check the following parameters before merging</h5>
    <!-- <p class="unlock-description" ng-bind-html="overlayMessage"></p> -->
    <ul>
        <li>Brand Country: {{brandCountryCode}}</li>

    </ul>
</div>

我不明白为什么它没有出现,但我可以看到console.log输出。我怀疑是因为范围是一个函数,但我想如果你将一个值设置为$scope,它应该随处可用,如果我错了请纠正我。

此外,可能是覆盖视图是来自typeahead html的单独html文件。但是,此叠加层视图具有控制器tablePageCtrl。控制器应该存在于两个html文件中。

this.openModal = function(type) {

    this.type = type;

    if(type == 'mergeRequest'){
        var templateUrl = 'app/views/dataMerge/overlayMsg.html';
        var backdropClass = 'auth-backdrop';
        var controller = 'tablePageCtrl';
    }

    this.modalInstance = $uibModal.open({
        animation: true,
        templateUrl: templateUrl,
        controller: controller,
        windowTopClass: 'auth-template',
        backdrop: 'static',
        backdropClass: backdropClass,
     });
};

我在控制器中名为$scope.test = 'test'的函数之外进行了测试,我在叠加视图中看到了值。我有其他基于onSelect函数的作用域遇到了这种情况,它们都在$scope函数下。

我添加了一个初始化程序$scope.brandCountryCode = '',但它没有做任何事情。如果我可以解决这个,那么其他的应该没问题。

不知道这里发生了什么,有没有人有任何建议。对Angular来说仍然是新手,您的帮助将不胜感激。谢谢!

修改

叠加模式的完整服务代码:

(function() {
  'use strict';

  angular
  .module('com.xad.se-tools')
  .service('tableModalService', function($scope, $uibModal){

    this.modalInstance = null;
    this.type = null;

    this.openModal = function(type) {
      this.type = type;
      if(type == 'mergeRequest'){
        var templateUrl = 'app/views/dataMerge/overlayMsg.html';
        var backdropClass = 'auth-backdrop';
        var controller = 'tablePageCtrl';
      }

      this.modalInstance = $uibModal.open({
        animation: true,
        templateUrl: templateUrl,
        // controller: 'AuthCtrl',
        controller: controller,
        windowTopClass: 'auth-template',
        backdrop: 'static',
        backdropClass: backdropClass,
        scope: $scope
      });
    };

    this.closeModal = function() {
      this.modalInstance.dismiss('cancel');
    }

  });

})();

0 个答案:

没有答案