【问题标题】:AngularJS, Angular-Material - HTML Not rendering despite object present on $scopeAngularJS,Angular-Material - 尽管 $scope 上存在对象,但 HTML 不呈现
【发布时间】:2017-05-28 22:33:52
【问题描述】:

我已广泛搜索此问题的解决方案,但似乎找不到。在这里的任何帮助将不胜感激。

基础知识:

  • 利用角材料标签
  • 从下拉列表中选择项目后,会调用 firebase 数据库并返回响应,该响应会放入 $scope 上的数组中。
  • HTML 正在此响应对象上使用 ng-repeat。

问题:

  • 尽管范围内存在响应对象,但 html 不会呈现任何内容,直到用户“单击”视图上的另一个按钮 - 任何按钮。事实上,用户必须简单地触摸/单击屏幕上的某些内容,然后呈现结果。

  • 如果用户调用数据库以获取特定媒介(即绘画)中的艺术家,但未单击屏幕上的任何内容,则根本不会显示任何结果,尽管 $scope 中存在响应对象.

我被难住了。

HTML:

<md-tabs md-dynamic-height md-border-bottom md-center-tabs><md-tab label="Artists">
    <md-content id="tab_background" class="md-padding">
        <div class="query_results hide_link" layout-padding>
            <a ng-repeat="artist in results  | filter: searchText"
               href="/#/artist/{{artist.selectedMedium}}/{{artist.uid}}">
                <md-card>
                    <img ng-src="{{artist.profImg}}" class="md-card-image" alt="Washed Out">
                    <md-card-header>
                        <div id="card_play_button_included">
                            <md-card-header-text>
                                <span class="hide_link md-title">{{artist.name}}{{artist.name_last}}</span>
                                <span class="hide_link md-subhead">{{artist.selectedSubmedium[0]}}</span>
                                <span class="hide_link md-caption">{{artist.neighborhood}}</span>
                            </md-card-header-text>
                        </div>
                    </md-card-header>
                    <md-card-actions layout="row" layout-align="end center">
                    </md-card-actions>
                </md-card>
            </a>
        </div>
    </md-content>
    </md-tab>
        <md-tab label="Events">
    </md-tab>
</md-tabs>

Javascript:

  $scope.getArtists = function(medium){
    //resetting results array
    $scope.firstArray = [];
    $scope.results = [];
    var Medium = medium.name;
    firebase.database().ref('/Artists/' + Medium).once('value').then(function(snapshot){
      console.log(snapshot.val());
      var obj = snapshot.val();
      for (var key in obj) {
        var innerObj = obj[key]
        innerObj.uid = key;
        console.log(innerObj);
        $scope.firstArray.push(innerObj);
      }
      $scope.results = $scope.firstArray;
      $scope.runSpinner();
    })
  }

【问题讨论】:

    标签: javascript angularjs angular-material


    【解决方案1】:

    我使用了 $scope.apply() 并解决了它。

    【讨论】:

      猜你喜欢
      • 2020-10-23
      • 2014-03-14
      • 1970-01-01
      • 2014-06-26
      • 1970-01-01
      • 2018-12-23
      • 1970-01-01
      • 2020-02-01
      • 2016-02-17
      相关资源
      最近更新 更多