AngularJS pass string from controller with angular variables in it to display in ng

Question

Here is a very simple version of what I'm trying to execute (this data is coming from all different controllers and the link is dynamic depending on where you are). So I can't assign the variables to $scope, I have to build the link in the view.

How do I pass {{scopeData}} in a string to a view to use in an ng-href or any other ng function, and have Angular pickup that it is a variable.

Sample Plunker

Plain Text: http://www.google.com/?test={{row.test}}&test2={{row.test2}}

Should be http://www.google.com/?test=1&test2=2

Answer 1

Define in HTML

The first way, you can build this variables on your html, something like this:

 <td><a ng-href="http://www.google.com/?test={{row.test}}&test2={{row.test2}}">{{url.display}}</a></td>

Using functions

You can create a function as well, for example:

Create a scope funciton that returns your link:

$scope.buildLink = function(row){

  return 'http://www.google.com/?test='+row.test+'&test2='+row.test2;

}

Then use this function in your html:

<td><a ng-href="{{buildLink(row)}}">{{url.display}}</a></td>

You can see this in action http://plnkr.co/edit/AgZ5erbPB177Y3OGYdLq

Dynamic Way

You can use $interpolate to compile the String with {{ }}. This $interpolate it is used by Angular $compile. You pass the string, and the arguments that will be replaced, see the code:

 $scope.buildLink = function(row){

  var miniScope = {
    row: row
  };

  var result = $interpolate($scope.url.link)(miniScope);

  return result;

}

On your html you receive the value of this function:

<a ng-href="{{buildLink(row)}}">{{buildLink(row)}}</a>

You can see the plunker in action:

http://plnkr.co/edit/CSXsySKNhiDGWHgiithc

I hope it helps

Answer 2

You cant use the {{}} syntax inside controller, build a service that make your controllers communicate or encode the address inside the html using ng-href

Answer 3

There is probably a better solution to your actual problem, but you can nevertheless achieve what you want by using the $interpolate service.

Here's a plunkr showing your demo: http://plnkr.co/edit/dhHl0as9RRmemY1dZz2E?p=preview

Key points:

$scope.getUrl = function(row) {
  var exp = $interpolate($scope.url.link);
  return exp({row: row});
}

This is not efficient though: you should only call $interpolate once (or every time the url changes), and then reuse the computed exp function.

Answer 4

You can use events to communicate data. See documentation for $scope.$broadcast, $scope.$emit, and $scope.$on.

app.controller('testing_href', function($scope) {
  $scope.$on("hrefData", function (event, data) {
    //do stuff with data
  });
});

app.controller('otherController', function($scope) {
  $scope.$broadcast("hrefData", data);
});

You can use factories to share data.

app.factory("href_data", function () {
  var api = {
    _data: null,
    setData: function (data) {
      this.data = _data;
    },
    getData: factory () {
      return this._data;
    }
  };
  return api;
});

app.controller('testing_href', function($scope, hrefData) {
  var data = hrefData.getData();
});

app.controller('otherController', function($scope, hrefData) {
  hrefData.setData(data);
});