In jQuery, it is possible to load the specific selector element in another HTML using the classes and id on load function
For example: $('#id').load("http://www.thisiswhyimbroke.com li:first .someclass")
Is there any way to do the same in AngularJS include i.e ng-include?
try this..
<div class="include-example" ng-class="template.class" ng-include="template.url">
Yes! I figured this out today. In my case I'm loading from the same domain, but loading in the entire page (angular, bootstrap, etc) just wasn't going to work.
In short you're going to need to make an interceptor catch the response and process it.
First, point your ng-include to your url.
<div ng-include="currentView.content.url"></div>
Second, we'll need to intercept the response. In my case I know I will always be loading in #articleAnswer.
app.factory('templateInterceptor', function($q) {
return {
response: function( response ) {
var html = response.data.toString();
if (html.indexOf('articleAnswer') !== -1) {
var parser = new DOMParser();
var doc = parser.parseFromString(html,'text/html');
var article = doc.querySelectorAll('#articleAnswer');
response.data = article;
}
return response;
}
};
});
Third, add the factory you just made to your $httpProvider interceptors.
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('templateInterceptor');
});
Fourth, you'll probably also want this bit in place to allow you to load in trusted html.
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self']);
});
I'm sure someone has a more elegant way of doing this, but hope this helps!
yes angular have directive for include templates in another html
please check these examples
http://jsfiddle.net/mrajcok/mfha6/
`https://jsfiddle.net/mrajcok/9krVn/3/`
both examples are fruitfull for ng-include and also get help from this question What is the correct syntax of ng-include?
