iframely
というディレクティブがあり、ng-repeat
の中に次のように記述しています。
<iframely url="iterator.url"></iframely>
これは、値を実際の"iterator.url"
値ではなく、文字列.url
として扱います。実験するために、私は直接URLを入力しました:
<iframely url="https://soundcloud.com/braxe1/braxe-one-more-chance"></iframely>
これにより、Syntax Error: Token ':' is an unexpected token
エラーが発生します。この値をディレクティブに渡すのに最も近いものは次のとおりです。
<iframely url="'{{iterator.url}}'"></iframely> // note double and single quotes
これにより、iterator
のURLパラメーターが解決されますが、' '
単一引用符とともに文字列の一部として渡されます。
編集:一重引用符なしで試してみました。
<iframely url="{{iterator.url}}"></iframely>
そしてError: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{iterator.url}}] starting at [{iterator.url}}]
これを行う正しい方法は何ですか?
EDIT2:ディレクティブのコードは次のとおりです。
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 )
})
}
}
}])
ディレクティブを次のように変更します。
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: scope.url
}
})
.then( function ( result ) {
scope.content = $sce.trustAsHtml( result.data.html )
})
}
}
}])
スコープ内の「@」とurl: scope.url
に注目してください。