指令范围变量在 Jade 中不起作用答案

【问题标题】：Directives scope variable does not work in Jade指令范围变量在 Jade 中不起作用
【发布时间】：2015-04-05 19:44:15
【问题描述】：

我知道标题不好，但情况本身就很奇怪，所以才有这个标题。所以这是我的玉文件 - 模板：

img.picture(ng-show='user.info.profilePicUrl', ng-src='{{user.info.profilePictureUrl}}')
img.picture(ng-show="!user.info.profilePicUrl", ng-src="dummyuser.png")
.basicinfo
  h1.fullname
    a(href='profile/{{user.info.username}}') {{user.info.fullName}}
  p.description {{user.info.bio}}
   span.additional
    a.website(href='{{user.info.website}}') {{user.info.website}}
    a.location(href='#') {{user.info.location}}
.follow
  .count {{user.followedBy.length}} Followers
  follow(to-follow-username="user.info.username")

在指令中：

scope: {
  user: "="
},
controller: function($scope){                                                                                      
    var request = $http({                                                                                            
      method: "get",                                                                                                 
      url: "/users/" + $scope.user.userID + "/getInfo",                                                              
    });                                                                                                              

    request.success(function(data, status, headers, config){                                                         
      $scope.user.info = data;                                                                                       
      console.log($scope.user);                                                                                      
    });                                                                                                              

    request.error(function(data, status, headers, config){                                                           
      console.log("Status");                                                                                         
      console.log(status);                                                                                           
    });                                                                                                              
  },       
templateUrl: "/templates/follower"

所以这里有问题：当我打开包含这个模板和指令的页面时，用户被传递给上面的jade，它的每一行都解析来自user的数据，除了profilePicUrl和user.info.username . user.info.username 在a(href='profile/{{user.info.username}}') {{user.info.fullName}} 行中可以正常工作，但它不起作用 - 在undefined 行中 - 在follow(to-follow-username="user.info.username") 行中。

img.picture(ng-show='user.info.profilePicUrl', ng-src='{{user.info.profilePictureUrl}}')
img.picture(ng-show="!user.info.profilePicUrl", ng-src="dummyuser.png")
.basicinfo
  h1.fullname
    a(href='profile/{{user.info.username}}') {{user.info.fullName}} //The username is actual username - Works Here
  p.description {{user.info.bio}}
   span.additional
    a.website(href='{{user.info.website}}') {{user.info.website}}
    a.location(href='#') {{user.info.location}}
.follow
  .count {{user.followedBy.length}} Followers
  follow(to-follow-username="user.info.username") //Doesn't work here

【问题讨论】：

p {{ user }} 显示什么？
是的，它只打印user 而没有user.info。我基于此编辑了问题。添加了我的指令的控制器功能。如何使那里的 http 调用同步？
我使用 promise (then()) 来完成此操作，但错误仍然存在。即使数据到了翡翠，翡翠表达式也会解析它，而ng-* do not：ng-show="!user.info.profilePicUrl"也不起作用。

标签： angularjs angularjs-directive pug

【解决方案1】：

不要使 HTTP cal 同步，而是在成功时重新应用范围修改：

request.success(function(data, status, headers, config){
  $scope.$apply(function () {
    $scope.user.info = data;
  });
});

【讨论】：

不幸的是没有运气。由于异步 HTTP 调用，模板立即呈现 - （我对此的拙见） - 有没有办法让模板在控制器返回或 requests 结束后呈现？
$apply 重新渲染模板。这应该不是问题。检查 data.username 是否包含一个字符串，然后您在控制台中是否有任何错误？