I have little problem that took me hours already to find a solution, I have a JSON which returns me names of pages + some information about it i pass it to the directive and everything works find, until i tried to add another scope to the directive displaying those items form JSON, items form json display as usual but the second scope with url of my page is not. What Am i doing wrong?
IN ANGULAR CONTROLLER
pageURL = 'blabla.com';
$scope.pageURL = pageURL;
ANGULAR DIRECTIVE
}).directive('itsearchresult', function() {
return {
restrict: 'AEC',
scope: {
result: '=result',
pageURL: '@pageURL'
},
templateUrl: 'SearchResults.html'
};
})
HTML
<itsearchresult result="result" pageURL="pageURL"></itsearchresult>
searchResults.html
<div ng-if="result != 2">
<h3 ng-if='result.nameWP == undefined'> <a href="{{pageURL}}{{result.name}}">
{{result.name}}</a></h3>
<h3 > <a href="{{pageURL}}{{result.postID}}">{{result.nameWP}}</a></h3>
...{{result.content}}...
link -> {{pageURL}} <- THIS little piece of 'art' doesn't show :(
Please help me, i really dont want to hang myself today.
Well, since you are doing nothing with your directive, you should remove that directive's scope and let it use parent's scope.
}).directive('itsearchresult', function() {
return {
restrict: 'AEC',
templateUrl: 'SearchResults.html'
};
})
<itsearchresult></itsearchresult>
And now all calls here must be to your controller scope
<h3 ng-if='result.nameWP == undefined'> <a href="{{pageURL}}{{result.name}}">
{{result.name}}</a></h3>
<h3 > <a href="{{pageURL}}{{result.postID}}">{{result.nameWP}}</a></h3>
...{{result.content}}...
And quick solution to you is rename page-url key
<itsearchresult result="result" page-url="pageURL"></itsearchresult>
And in your directive
}).directive('itsearchresult', function() {
return {
restrict: 'AEC',
scope: {
result: '=result',
pageUrl: '@pageUrl'
},
templateUrl: 'SearchResults.html'
};
})