CSS/Javascript не является обязательным для динамического HTML присоединять

Я пытаюсь связать HTML динамически с углового контроллераCSS/Javascript не является обязательным для динамического HTML присоединять

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:

<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>

Цель 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>

Но вышеуказанный код не был привязан к целевому элементу.

Тот же код отлично работает, если это статический html-код.

Просьба помочь мне, где я делаю неправильно.

Чтобы быть более конкретным: Благодаря динамической привязки из HTML DOM не удалось связать данных фильтр Есть в любом случае, чтобы обновить DOM объекты после динамического HTML связывания?

источник

2017-02-12 Vigneshwaran Markandan

Это не правильный угловой способ достичь хотите вы хотите. Имейте à look à 'ng-repeat' https://docs.angularjs.org/api/ng/directive/ngRepeat – Merlin

Я предполагаю, что здесь нет ничего общего с угловым, я получу тот же результат, И снова он не будет привязан. Вместо фильтра данных href будет работать. –

Попробуйте поставить фрагмент этот код

$scope.categoriesList = [];

Потому что вы должны собирать данные для массива внутри $ области. Кстати, если вы хотите очистить код, вы можете использовать сервис или фабрику. Здесь находится LINK

Постарайтесь увидеть разное обслуживание и заводские угловые. Приветствия

источник

2017-02-12 07:35:45 Adoel

в цикле в массивах я рекомендую использовать ng-repeat директиву взглянуть на ng-repeat documentation

AngularJS не Jquery см this question к лучшему пониманию того, как angularJS работает

также:
Вы настраиваете приложение с помощью ng-app="SkillsApp"
Вы настраиваете свое приложение roller with ng-controller="homeController"
Вы звоните: getAllCategories()? например: ng-init="getAllCategories()"

Пример

SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) { 
$scope.getAllCategories = function() { 
    $http({ 
     url: "/Categories/GetAllCategories", 
     method: 'GET', 
    }).success(function (response) { 
     $scope.categoriesList = response; 
    }); 
}; 


<body ng-app="SkillsApp" ng-controller="homeController" ng-init="getAllCategories()" > 
    <ol class="type"> 
     <li ng-repeat="categorie in categoriesList"> 
      <a href="#">{{categorie.name}}</a> 
     </li> 
    </ol> 
</body>

источник

2017-02-12 07:43:53 Merlin

Я думаю, что здесь нет ничего общего с угловым, я получу тот же результат, Опять же, он не будет привязан. Вместо фильтра данных href будет работать. –

какой 'data-filter' должен делать? В директиве '' '' '' '' '' '' '' '' '' '' '' '' '' '' ''' '' '' '' ' – Merlin

CSS/Javascript не является обязательным для динамического HTML присоединять

ответ

Смежные вопросы