Question

我是AngularJS的新用户，而我正在使用AngularJS制作滑块<dive> tag

我想在点击按钮后向HTML添加另一个滑块。

这是我更改HTML部分

的方式

    <article ng-app="angularSlideables">
        <h1 slide-toggle="#derp" >Click here for Hipster Ipsum.</h1>
        <div id="derp" class="slideable">
            <p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
        </div>
        <div id="slideholder"></div>
        <button id="goDiv" onclick="goAdd();">Add slider Slider</button>
    </article>

我的Javasciprt代码现在看起来像这样

angular.module('angularSlideables', [])
.directive('slideable', function () {
    return {
        restrict:'C',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
})
.directive('slideToggle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var target = document.querySelector(attrs.slideToggle);
            attrs.expanded = false;
            element.bind('click', function() {
                var content = target.querySelector('.slideable_content');
                if(!attrs.expanded) {
                    content.style.border = '1px solid rgba(0,0,0,0)';
                    var y = content.clientHeight;
                    content.style.border = 0;
                    target.style.height = y + 'px';
                } else {
                    target.style.height = '0px';
                }
                attrs.expanded = !attrs.expanded;
            });
        }
    }
});


function goAdd() {
 var ht="<h1 slide-toggle='#derpp'>Another Slider</h1><div id='derpp' class='slideable'><p>hi my name is Alex</p></div>";
 document.getElementById('slideholder').innerHTML=ht;
}

虽然我制作了确切的代码，但我的滑块无法正常工作。我认为这是因为我添加更多HTML代码后模块无法重新加载。所以我的问题是如何在点击按钮后重新加载javascript模块？

如果它有任何区别，我将在我的Cordova项目中使用此代码来使用ionic安卓应用。

谢谢

如何以编程方式更改HTML后重新加载js模块？

0 个答案: