CODEWITHSUNDEEP
angularjs
Arnaud Denoyelle
Arnaud Denoyelle

Reputation: 31215

Use ng-model in href

Angular is new to me. I try to make a link which contains a dynamic href attribute.

So far, I read that using ng-href instead of href was a good practice. But, when I try this : 

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

(I also tried without the curly brackets)

The href value does not take the value that I put in the controller : 

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

Am I doing something wrong?

Here is the value of data as shown is the console : 

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

More background :

I want to create a "twitter authorization" modal : 

<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>

Then, when the user wants to authorize twitter, I call my server, which calls twitter then give me the URL that I want to place into the href:

$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!
    }
  );
};

Upvotes: 1

Views: 6816

Answers (2)

Tom
Tom

Reputation: 7740

Your view is going to see the update to the $scope, as changing a $scope value causes an Angular $digest loop.

You can simply set a regular href to your model by using curly braces, as such:

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

See this jsBin -- hover over the URL first, then click the button, after 1 second the URL will update

Upvotes: 0

Strille
Strille

Reputation: 5781

It looks like you are making a call to an api outside of Angular? In that case you need to "tell" Angular that a change occurred so that Angular can update the views. To do that you can call scope.$apply():

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

Upvotes: 1

Related Questions