相关疑难解决方法(0)

AngularJS指令传递字符串

该指令试图创建一个名为进度条的HTML元素,用于在页面移动到页面时跟踪进度.我正在尝试将其开发用作: <progress-bar progress='1' max='6' error="true"></progress-bar>

我只是试图将html中的^^元素中的信息传递给我的指令并处理信息以适当地更改进度条.

这适用于"progress"和"max",它取整数值,但由于某种原因,注释掉的代码会处理"错误"(这是一个字符串)会导致问题.我是angularJS的新手,所以如果这些听起来令人困惑或不清楚,我很抱歉......请问我是否需要详细说明/澄清.提前致谢!

app.directive('progressBar', function(){

var compileProgressBar = function(scope, elem, attrs) {
    var append = '<nav class="navbar navbar-fixed-bottom navbar-footer" role="navigation">\
                    <div class="container">\
                        <div class="row">';
    var i = 1;
    while (i <= parseInt(scope.max)) {
        if (i <= parseInt(scope.progress)) {
            //if (scope.error == "true"){
                //...
            //}
            //else {
            append += '<div class="col-xs-1"><div class="circle-filled"><center>'+i+'</center></div></div>'
            //}
        } else {
            append += '<div class="col-xs-1"><div class="circle-hallow"><center>'+i+'</center></div></div>'
        }
        i++;
    }
    append += '</div></div></nav>'
    elem.append(append);
    elem.bind('click', function(){
        if (scope.progress > 1) {
            history.back();
            scope.$apply(); …
Run Code Online (Sandbox Code Playgroud)

javascript string parameter-passing angularjs angularjs-directive

62
推荐指数
1
解决办法
6万
查看次数

AngularJS ng-repeat with OwlCarousel

我正在尝试做的是使用ng-repeat指令将角度构建到我的轮播结构中,然后将其提供给owl carousel jquery插件.部分技巧是这个旋转木马进入视图(ngView).

遗憾的是,这似乎并不那么简单.

我到目前为止探讨的选项是:

  1. $viewContentLoaded事件.这不起作用,显然不赞成(因为它相当于控制器的DOM操作)
  2. 只需在视图页面底部包含一些脚本即可初始化carousel插件.这适用于静态内容,但不适用于通过ng-repeat添加的内容
  3. 添加自定义指令.好吧,这样做有效,但这似乎意味着我必须自己建立整个旋转木马.很好地使用jQuery.append()等代码.

基本上我的问题是:有没有其他/更好的方法来做到这一点(与无限循环和HTML字符串连接相反)?

请注意,我需要建立的真正的旋转木马项目比下面的示例更复杂.

好的,现在有些代码:

首先,来自相关视图的HTML片段:

<div class="owl-carousel owl-theme daCarousel" da-carousel="">
</div>
Run Code Online (Sandbox Code Playgroud)

接下来,指令配置:

app.directive('daCarousel',function () {
    var makeItLive = function (scope, element, attrs)
    {
        //TODO feed in real data here
        for (var i = 0; i < 10; i++) {                  
            $(element).append ('<div class="item">Item ' + i + '</div>');
        }

        $(element).owlCarousel({
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true                     

        });
};
Run Code Online (Sandbox Code Playgroud)

编辑

好的,同时我发现了这项$templateCache服务.

本质上是在脚本标签中定义一个模板(我的实际上是在相关的视图中): …

jquery angularjs owl-carousel

3
推荐指数
1
解决办法
4706
查看次数