Question

Angular对我来说是新的。我尝试创建一个包含动态href属性的链接。

到目前为止，我读到使用ng-href代替href这是一个很好的做法。但是，当我尝试这个时：

<a target="_blank" data-ng-href="{{myUrl}}">Follow this URL</a>

（我也试过没有大括号）

href值不会取我放入控制器的值：

function (data) {
  console.log("data : %o", data);
  console.log("url : "+data.url);
  $scope.myUrl =  data.url;
}

我做错了吗？

以下是控制台显示的数据值：

data : Object
  requestTokenId: 3405
  url: "https://api.twitter.com/oauth/authorize?oauth_token=TBqMIpdz[...]"
  __proto__: Object

更多背景资料

我想创建一个“推特授权”模式：

<div data-ng-controller="myController">

<!-- 
Some HTML elements on which data-binding works.
-->

<div class="modal fade" id="authorizationTwitterModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
            class="sr-only">Close</span></button>
        <h4 class="modal-title">Authorization</h4>
      </div>
      <div class="modal-body">
        <ol>
          <li>Connect to your account</li>
          <li id="liAuthorizationTwitterURL"><a target="_blank" ng-href="{{myUrl}}">Follow this URL</a></li>
          <li>Authorize Ambasdr</li>
          <li>Copy/Paste the authorization code here :</li>
        </ol>
        <p class="text-center">
          <input id="verifier" name="value" type="text">
        </p>
      </div>
    </div>
  </div>
</div>

然后，当用户想要授权推特时，我打电话给我的服务器，调用twitter，然后给我一个我要放入href的URL：

$scope.addTwitterAccount = function(brandId) {
  console.log("addTwitterAccount");
  var popup = wait("Authorization");
  //$scope.myUrl =  'http://www.google.fr'; <- This change works!
  $.doPost("/api/request_token/",
    {
      socialMedia: 'TWITTER'
    },
    function (data) {
      console.log("data : %o", data);
      console.log("url : "+data.url);
      $scope.myUrl =  data.url; // <- This change does not work!
    }
  );
};

Answer 1

看起来你正在调用Angular之外的api？在这种情况下，您需要“告诉”Angular发生了更改，以便Angular可以更新视图。为此，您可以致电scope.$apply()：

function (data) {
  $scope.$apply(function(){
      $scope.twitterUrl =  data.url;
  }); 
}

Answer 2

您的视图将会看到$scope的更新，因为更改$scope值会导致Angular $digest循环。

您可以使用大括号简单地为您的模型设置常规href：

<a href="{{myUrl}}">Link</a>

请参阅this jsBin - 首先将鼠标悬停在网址上，然后点击按钮，1秒后网址将更新

在href中使用ng-model

2 个答案: