javascript - $scope 在 View 中未定义，但在 Controller 中未定义

Question

我有一个 $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，但在模态视图(覆盖 View )中看不到。

<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 中设置一个值，它应该在任何地方都可用，如果我错了，请纠正我。

此外，覆盖 View 也可能是与 typeahead html 不同的 html 文件。但是，此覆盖 View 具有 Controller tablePageCtrl。 Controller 应该出现在两个 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,
     });
};

我在 Controller 中名为 $scope.test = 'test' 的函数之外进行了测试，我在叠加 View 中看到了该值。我有其他基于 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了解更多详情。