0

I am new in AngularJs and now am converting my website in to AngularJs.I have a slider in my HTML file and I want to use same in AngularJs.Is it possible?

HTML 

<div class="da-slider_bg"  ng-init="init()" ng-controller="homeCtrl">
               <div id="da-slider" class="da-slider">
                 <div class="da-slide" ng-repeat="slider in sliders">
                    <h2>{{title}}</h2>
                    <p>{{desc}}</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="{{imgUrl}}" alt="image01" style="width:100%" /></div>
                </div>
                <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav>
            </div>
</div>

CONTROLLER/JAVASCRIPT

app.controller('homeCtrl', ['$scope', function ($scope) {
    $scope.title = 'Jobs Recruitment';
    $scope.items = [
        {"title": "Holiday Solution", "imgUrl": "images/3s.png", "desc": "Romantic Vacations, Honeymoon Travel Beach Vacation, Honeymoon Vacation, Romantic Gateways, Luxury Travel, Destination Weddings"},
        {"title": "Anna", "imgUrl": "images/2s.png", "desc": "Desc"},
        {"title": "Peter", "imgUrl": "images/airline_icon.png", "desc": "Desc"}
    ];
    $scope.init = function () {
        $('#da-slider').cslider({
            autoplay: true,
            bgincrement: 450
        });
    };
}]);

How can I implement this?

When a developer developing websites,He receives HTML from designer.designer should consider angularJs on his design or normal HTML can be convert in to complete angularJs application by developer? Simplified,Is there any difference for normal HTML design files and AngularJs design files?

//MY CODE UPDATED AFTER HAVING SOME RESEARCH.

    app.directive('slider', function () {
    return {
        restrict: 'E',
        template: '<span id="map"></span>' +
                '<div class="da-slide" ng-repeat="slider in sliders">' +
                ' <h2>{{slider.title}}</h2>' +
                '<p>{{slider.desc}}</p>' +
                '<a href="#" class="da-link">Read more</a>' +
                '<div class="da-img"><img src="{{slider.imgUrl}}" alt="image01" style="width:100%" /></div>' +
                '',
        replace: false,
        link: function (scope, element, attrs) {
            $('#da-slider').click(function (e) {
                alert(1);
                $(this).cslider({
                    autoplay: true,
                    bgincrement: 450
                });
            });
        }
    };
})

Alert is working but slider not initializing.What is wrong in my code?

Shihabuddeen
  • 33
  • 6

2 Answers2

0

You probably want to create a directive and invoke cslider() in the link function.

app.directive('daSlider', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      element.cslider({
        autoplay: true,
        bgincrement: 450
      });
    }
  };
});
atawmicpm
  • 16
  • 3
0

Finally I found working code for me,I have written a directive and initialize slider when angualjs ready. code below

    app.directive('slider', function () {
    return {
        restrict: 'E',
        template: '<div id="da-slider" class="da-slider" ng-controller="homeCtrl">' +
                '<div class="da-slide" ng-repeat="slider in sliders">' +
                ' <h2>{{slider.title}}</h2>' +
                '<p>{{slider.desc}}</p>' +
                '<a href="#" class="da-link">Read more</a>' +
                '<div class="da-img"><img src="{{slider.imgUrl}}" alt="image01" style="width:100%" /></div>' +
                '</div>',
        replace: false,
        link: function (scope, element, attrs) {
            angular.element(document).ready(function () {
                $('#da-slider').cslider({
                    autoplay: true,
                    bgincrement: 450
                });
            });
        }
    };
});
Shihabuddeen
  • 33
  • 6