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

Question

我有一个 $scope 需要显示国家列表中 select 的 iso 代码。

因此，国家列表正在获取一个 $http 调用工厂并将其填充到一个范围中，到目前为止一切顺利

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

presentCountries 将被发送到 typeahead，用户将在其中输入国家和 select，如下所示：

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

一旦它被 selected，它将调用作用域函数 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，它应该在任何地方都可用，如果我错了请纠正我。

此外，叠加视图可能是与预先输入 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');
    }

  });

})();

Answer 1

我认为您应该在模态实例中设置 scope 配置选项以设置模态中使用的范围：

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

请查看 angular bootstrap 模态文档 here 了解更多详情。

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

$scope is undefined in view but not in controller

html

javascript

angularjs