【问题标题】:ng-bind not showing anything after API call sets dataAPI调用设置数据后,ng-bind不显示任何内容
【发布时间】:2013-08-27 16:26:40
【问题描述】:

这是我的代码,用户名没有显示在我的 DOM 中。 启动 soundcloud API 后,使用 SC.get 调用加载数据,其中的回调函数将 $scope.user 设置为响应。

如果我检查我的浏览器什么都不会显示,有什么想法可以解决这个问题吗?

<div ng-controller="trackCtrl">
    <p ng-bind="user.username"></p>
</div>

function trackCtrl($scope)
{
    $scope.initialize = function() {
        console.log('initialize');
        SC.initialize({
            client_id: "CLIENT_ID",
            redirect_uri: "http://soundcloud.dev/app/callback.html",
        });

        SC.get('/users/marioochoa/', function(user) {
            $scope.user = user;
            $scope.getTracks();
        });
    };

    $scope.getTracks = function() {
        console.log('getTracks');
    };

    $scope.initialize();
};

【问题讨论】:

  • {{user.username}}

    也许
  • 那也是一样的,给了我同样的问题。

标签: javascript angularjs soundcloud


【解决方案1】:

由于 SC.get 回调是从“外部”Angular 调用的,因此您需要手动触发摘要循环,以便 Angular 更新视图。为此,您应该致电$scope.$apply():

SC.get('/users/marioochoa/', function(user) {
  $scope.$apply(function() {
    $scope.user = user;
    $scope.getTracks();
  });
});

你可以在here找到更多信息。

【讨论】:

  • 我建议您遵循@JeroenIngelbrecht 的建议,将ng-bind 替换为{{ expression }}。两者都做同样的事情,但后者不那么冗长。当然,除非您使用 ng-bind 来防止浏览器在 Angular 编译之前暂时显示原始表达式。
  • 谢谢,我知道 ;-)。您不认为必须有某种方法可以防止在编译之前显示 {{ 表达式 }}?
  • 事实上,有一种方法可以做到这一点:ng-cloak 指令。 docs.angularjs.org/api/ng.directive:ngCloak
猜你喜欢
  • 1970-01-01
  • 2015-03-08
  • 2019-10-23
  • 1970-01-01
  • 2020-12-17
  • 2017-12-21
  • 1970-01-01
  • 1970-01-01
  • 2015-09-01
相关资源
最近更新 更多