Question

我是AngularJs的新手，现在正在将我的网站转换为AngularJs.I我的HTML文件中有一个滑块，我想在AngularJs.中使用它。这可能吗？

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>

控制器/ 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
        });
    };
}]);

我该如何实现？

当开发人员开发网站时，他从designer.designer接收HTML应该考虑在他的设计上使用angularJs，或者普通HTML可以由开发人员转换为完整的angularJs应用程序吗？简化，普通的HTML设计文件和AngularJs设计文件有什么区别吗？

//我的代码在进行了一些研究后更新了。

    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
                });
            });
        }
    };
})

警报正在运行但滑块没有初始化。我的代码出了什么问题？

Answer 1

您可能想要创建一个指令并在链接函数中调用cslider（）。

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

Answer 2

最后我找到了工作代码，我写了一个指令并在angualjs准备好时初始化滑块。代码

    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
                });
            });
        }
    };
});

我可以在angularJs中使用jquery滑块吗？

2 个答案: