Question

我需要根据template从index获得的数量更改ng-repeat如何实现该目标？

在我的情况下，如果index为0，我想更改`模板＆＃39; 这是我的代码：

"use strict";
angular.module("tcpApp")

    .directive('programName', function () {
        return {
            restrict    : 'AE',
            replace     : true,
            scope       : {
                            name:'@',
                            index:'@'
                        },
            template    : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>',
            link        : function (scope, element, attr) {
                            scope.callMe = function () {
                                console.log($(element).prop('class'));
                            }
                        }
        }
    });

我试过这样但却抛出错误：

    template    : scope.index ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>',

错误：ReferenceError: scope is not defined

HTML

<div class="progName">
                <div class="swiper"></div>

                <program-name name="{{appName.title}}" data-page="Home" index="{{$index}}" ng-repeat="appName in appNames"></program-name>
            </div>

Answer 1

我没有经过测试，但您应该能够做到这样的事情：

.directive('programName', function ( $compile ) {
        return {
            restrict    : 'AE',
            replace     : true,
            scope       : {
                            name:'@',
                            index:'@'
                        },

            link        : function (scope, element, attr) {
                            scope.callMe = function () {
                                console.log($(element).prop('class'));
                            }

                            var getTemplate = function( index ) {
                              return Number(index) ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>';
                             }

                             element.html(getTemplate(scope.index));

                            $compile(element.contents())(scope);
                        }
        }
    })

修改

甚至更好的解决方案可能是：

.directive('programName', function ( ) { return { restrict : 'AE', replace : true, scope : { name:'@', index:'@' }, template : function(tElement, tAttrs) { return Number(tAttrs.index) ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>'; }, link : function (scope, element, attr) { scope.callMe = function () { console.log($(element).prop('class')); } } } })

Answer 2

您必须在代码中注入范围，以便在条件

中使用它

template : function (scope){return scope.index ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' :
                                   '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>'},

http://plnkr.co/edit/OwU6099NuaPkRqP9QejQ?p=preview

如何通过`index` value

2 个答案: