Syntax Error: Token ':' is an unexpected token when passing variable to directive

angular-directive, angularjs

Solution

You must replace `url: '='`

By `url: '@'`

https://docs.angularjs.org/api/ng/service/$compile

Problem

I have a directive called `iframely` and I it inside an `ng-repeat` like this: ``` <iframely url="iterator.url"></iframely> ``` This just treats the value as the string `"iterator.url"`, not the actual `.url` value. To experiment, I just put in a URL directly: ``` <iframely url="https://soundcloud.com/braxe1/braxe-one-more-chance"></iframely> ``` Which gives me the `Syntax Error: Token ':' is an unexpected token` error. The closest I've gotten to passing this value to the directive is: ``` <iframely url="'{{iterator.url}}'"></iframely> // note double and single quotes ``` This resolves the URL parameter of `iterator`, but also passes it along with the `' '` single-quotes as part of the string. EDIT: Also tried that without the single quotes. ``` <iframely url="{{iterator.url}}"></iframely> ``` And got `Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{iterator.url}}] starting at [{iterator.url}}]` What is the correct way to do this? EDIT2: Here is the code for the directive: ``` angular.module( 'iframely', []) .directive( 'iframely', [ '$http', '$sce', function ( $http, $sce ) { return { replace: true, restrict: "E", scope: { url: '=' }, template: '<div ng-bind-html="content"></div>', link: function ( scope, element, attrs ) { $http( { url: 'http://localhost:8061/iframely', method: 'GET', params: { url: attrs.url } }) .then( function ( result ) { scope.content = $sce.trustAsHtml( result.data.html ) }) } } }]) ```

Original source