[英]CSS/Javascript not binding on dynamic html append
我正在尝试从角度控制器动态绑定 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无法绑定数据过滤器动态html绑定后是否有刷新DOM对象?
要循环到数组中,我建议使用ng-repeat
指令查看ng-repeat 文档
AngularJS不是Jquery看到这个问题可以更好地理解 angularJS 是如何工作的
还:
您是否使用ng-app="SkillsApp"
设置您的应用ng-app="SkillsApp"
您是否使用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>
尝试把这段代码的片段
$scope.categoriesList = [];
因为您应该将数据收集到 $scope 内的数组中。 顺便说一句,如果你想代码更干净,你可以使用服务或工厂。 这是链接
尝试从角度看服务和工厂的不同。 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.