角ngRepeat - 更新HTML更改后 [英] Angular ngRepeat - Update after HTML changed
问题描述
我有我似乎无法绕过的问题。
我有一个简单的角度重复设置输出一些幻灯片。有不同组的幻灯片可以被改变。我使用jQuery插件伟大的工程滑块。
问题是，当我运行了jQuery插件，滑块，它ofcourse改变了HTML的结构。所以，当我改变幻灯片在控制器范围，角度不删除旧的幻灯片。
我有一个工作的例子在这里：
http://jsfiddle.net/antony_publica/ccvjz4au/
要测试，通过幻灯片滚动，应该有1，2 3，然后4.单击列表2.现在，当您翻阅您到8见幻灯片1当它应该有5到8。
HTML
＆LT; DIV NG控制器=MyCtrl＆GT;
上市编号：{{current_listing.id}}
＆LT; DIV CLASS =image_slider COL-MD-9NG-IF =current_listing＆GT;
＆LT; DIV CLASS =滑头滑滑NG重复=幻灯片中current_listing.slides重复结束=initSlider（）＆GT;
{{滑动}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;按钮NG点击=current_listing =上市＆GT;清单1＆LT; /按钮＆GT;
＆LT;按钮NG点击=current_listing = listing2＆GT;清单2'，/按钮＆GT;
＆LT; / DIV＆GT;
JS
VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（repeatEnd功能（）{
返回{
限制：A，
链接：功能（范围，元素，ATTRS）{
如果（范围。$最后一个）{
的setTimeout（函数（）{
范围$的eval（attrs.repeatEnd）。
}，50）;
}
}
};
}）;
功能MyCtrl（$范围）{
$ scope.listing = {
ID：1，
幻灯片：幻灯片1，幻灯片2，幻灯片3，幻灯片4']
};
$ scope.listing2 = {
ID：2，
幻灯片：['幻灯片5，幻灯片6，幻灯片7，幻灯片8']
};
$ scope.current_listing = $ scope.listing;
$ scope.initSlider =功能（）{
如果（$（'。image_slider'）。hasClass（'油滑滑块'））{
$（'。image_slider'）华而不实的（'unslick'）。
}
$（'。image_slider'）滑头（）。
}
}
我创建了指令内分页脚本，将只显示都包含在你的 current_listing.slides 对象的属性值。我删除了 NG-重复指令从你的HTML，因为它是在每次上的列表按钮，点击时间增加了4根滑向DOM。我也动了你的 {{范围的变量在这里}} code，从你的HTML，放在 NG-绑定内的变量指令，以便括号不显示角度编译之前在屏幕上。我还添加了一个 NG-点击指令到一个整数值传递给设置了 current_listing 控制器的上市按钮值。
活生生的例子： HTTP：//$c$cpen.io/larryjoelane/pen/ZWzObo
HTML
＆LT; DIV NG-应用=对myAppNG控制器=MyCtrl＆GT;
上市编号：LT;跨度NG绑定=current_listing.id＆GT;＆LT; / SPAN＆GT; ＆LT; DIV重复的高端类=image_slider COL-MD-9＆GT;
＆LT; DIV NG绑定=幻灯片级=华而不实＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;按钮NG点击=changeListing（1）＆GT;清单1＆LT; /按钮＆GT;
＆LT;按钮NG点击=changeListing（2）＆GT;清单2'，/按钮＆GT;
＆LT; / DIV＆GT;
角/ JQuery的：
（函数（$）{ VAR对myApp = angular.module（'对myApp'，[]）; myApp.directive（repeatEnd功能（$超时）{
返回{
限制：A，
链接：功能（范围，元素，ATTRS）{//开头的链接 //让角先编译然后调用jQuery的code
$超时（函数（）{//开始超时 功能buildSlides（）{ //数组来保存幻灯片
变种幻灯片= []; //通过环和开闭div标签的载玻片
对于（VAR I = 0; I＆LT; scope.current_listing.slides.length;我++）{//开始为 //添加幻灯片
slides.push（＆LT; DIV＆gt;中+ scope.current_listing.slides [I] +＆LT; / DIV＆gt;中）; } //结束了 //返回幻灯片的html
返回slides.join（）; } //函数结束 // initalize滑头滑
$（元素）.slick（$范围的eval（））; //检查在列表中的变化
范围。$腕表（'current_listing'，功能（为newValue，属性oldValue）{//开头的手表 //如果有一个新的值
如果（newValue）以{ //破坏光滑滑块
$（元件）.slick（unslick）; //保存HTML
VAR内容= buildSlides（）; //填充幻灯片
。scope.slides = $范围的eval（element.html（内容））; // reinitalize滑头滑
$（元件）.slick（）; }
}）; //高端腕表 }）; //超时结束 } //结束链接 };
}）; myApp.controller（MyCtrl，[$范围，$超时功能（$范围，$超时）{ $ scope.listing = {
ID：1，
幻灯片：幻灯片1，幻灯片2，幻灯片3，幻灯片4']
}; $ scope.listing2 = {
ID：2，
幻灯片：['幻灯片5，幻灯片6，幻灯片7，幻灯片8']
}; // intialize上市
$ scope.current_listing = $ scope.listing; //改变上点击上市
$ scope.changeListing =功能（LISTNUM）{//开始功能 //分配基础上，LISTNUM的清单
//传递作为参数。 如果（LISTNUM === 1）{
$ scope.current_listing = $ scope.listing;
}否则如果（LISTNUM === 2）{
$ scope.current_listing = $ scope.listing2;
} } //函数结束 }]）;}）（jQuery的）;
I have a problem which I can't seem to get around.
I have a simple angular repeat setup to output some slides. There are different sets of slides which can be changed. I'm using a jQuery plugin for the slider which works great.
The problem is that when I run the jQuery slider plugin, it ofcourse changes the html structure. So when I change the slides in the controller scope, angular doesn't remove the old slides.
I have a working example here:
http://jsfiddle.net/antony_publica/ccvjz4au/
To test, scroll through the slides, there should be 1, 2 3, then 4. Click listing 2. Now when you scroll through you see slides 1 through 8. When it should have 5 through 8.
HTML
<div ng-controller="MyCtrl">
Listing Id: {{current_listing.id}}
<div class="image_slider col-md-9" ng-if="current_listing">
<div class="slide slick-slide" ng-repeat="slide in current_listing.slides" repeat-end="initSlider()" >
{{slide}}
</div>
</div>
<button ng-click="current_listing = listing">Listing 1</button>
<button ng-click="current_listing = listing2">Listing 2</button>
</div>
JS
var myApp = angular.module('myApp',[]);
myApp.directive("repeatEnd", function(){
return {
restrict: "A",
link: function (scope, element, attrs) {
if (scope.$last) {
setTimeout(function(){
scope.$eval(attrs.repeatEnd);
}, 50);
}
}
};
});
function MyCtrl($scope) {
$scope.listing = {
id: 1,
slides: ['Slide 1','Slide 2','Slide 3', 'Slide 4']
};
$scope.listing2 = {
id: 2,
slides: ['Slide 5','Slide 6','Slide 7', 'Slide 8']
};
$scope.current_listing =$scope.listing;
$scope.initSlider = function(){
if($('.image_slider').hasClass('slick-slider')){
$('.image_slider').slick('unslick');
}
$('.image_slider').slick();
}
}
I created a pagination script inside your directive that will show only the slides that are contained within your current_listing.slides object property value. I removed the ng-repeat directive from your html because it was adding four more slides to the dom each time you clicked on a listing button. I also moved your {{ scope variable here }} code from your html and placed the variables inside of ng-bind directives so that the brackets are not displayed on the screen before angular compiles. I also added an ng-click directive to your listing buttons that pass an integer value to the controller that sets the current_listing value.
Live Example: http://codepen.io/larryjoelane/pen/ZWzObo
HTML:
<div ng-app="myApp" ng-controller="MyCtrl">
Listing Id: <span ng-bind="current_listing.id"></span>
<div repeat-end class="image_slider col-md-9">
<div ng-bind="slides" class="slick">
</div>
</div>
<button ng-click="changeListing(1)">Listing 1</button>
<button ng-click="changeListing(2)">Listing 2</button>
</div>
Angular/JQuery:
(function($) {
var myApp = angular.module('myApp', []);
myApp.directive("repeatEnd", function($timeout) {
return {
restrict: "A",
link: function(scope, element, attrs) { //begin link
//let angular compile first then call the jquery code
$timeout(function() { //begin timeout
function buildSlides() {
//array to hold the slides
var slides = [];
//loop through and the opening and closing div tags to the slides
for (var i = 0; i < scope.current_listing.slides.length; i++) { //begin for
//add the slide
slides.push("<div>" + scope.current_listing.slides[i] + "</div>");
} //end for
//return the slides html
return slides.join("");
} //end function
//initalize slick slider
$(element).slick(scope.$eval());
//check for changes in the listing
scope.$watch('current_listing', function(newValue, oldValue) { //begin watch
//if there is a new value
if (newValue) {
//destroy the slick slider
$(element).slick("unslick");
//store the html
var content = buildSlides();
//populate the slides
scope.slides = scope.$eval(element.html(content));
//reinitalize slick slider
$(element).slick();
}
}); //end watch
}); //end timeout
} //end link
};
});
myApp.controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {
$scope.listing = {
id: 1,
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
};
$scope.listing2 = {
id: 2,
slides: ['Slide 5', 'Slide 6', 'Slide 7', 'Slide 8']
};
//intialize the listing
$scope.current_listing = $scope.listing;
//change the listing on click
$scope.changeListing = function(listNum) { //begin function
//Assign the listings based on the listNum
//passed in as a parameter.
if (listNum === 1) {
$scope.current_listing = $scope.listing;
} else if (listNum === 2) {
$scope.current_listing = $scope.listing2;
}
} //end function
}]);
})(jQuery);
这篇关于角ngRepeat - 更新HTML更改后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
