Attempting to dynamically bind HTML from an Angular controller
SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) {
$scope.getAllCategories = function () {
$http({
url: "/Categories/GetAllCategories",
method: 'GET',
}).success(function (response) {
$scope.categoriesList = response;
for (var i = 0; i < $scope.categoriesList.length; i++)
{
var categoryyy = '<li><a href="#" data-filter=".commercial">' + $scope.categoriesList[i].Name + '</a></li>';
$('#Category').append(categoryyy);
}
});
};
HTML Result:
<ol class="type" id="Category">
<li><a href="#" data-filter=".commercial">Commercial</a></li>
<li><a href="#" data-filter=".residential">Residential</a></li>
<li><a href="#" data-filter=".commercial">Commercial</a></li>
</ol>
Target HTML:
<div class="col-sm-6 col-md-4 col-lg-4 RESIDENTIAL">
<div class="portfolio-item">
<div class="hover-bg">
<a href="img/portfolio/01-large.jpg" title="Project Title" data-lightbox-gallery="gallery1">
<div class="hover-text">
<h4>Project Name</h4>
</div>
<img src="~/img/portfolio/01-small.jpg" class="img-responsive" alt="Project Title">
</a>
</div>
</div>
</div>
The above code failed to bind to the target element.
The same code functions perfectly when static HTML code is used.
Seeking assistance in identifying where errors may exist within the code.
To be more specific : Issues with dynamic binding causing DOM not able to bind data-filter Is there a way to refresh DOM objects after dynamic HTML binding?