Question

只是寻找一些建议，以及如何创建一些类似的指令功能，但模板和数据不同。

因此，举例来说，你可以想到我拥有的3 * 4卡，每张卡都可以有不同的卡模板。因此，您可能会有个人卡，名片，成绩单等。所有这些卡片将一起显示在无序列表中。它们具有相似的功能，可以单击，编辑，发布和删除。

目前我有一个针对每种卡类型的指令，然后只使用和ng-if循环记录并检查card.type以查看要加载的指令。这对我来说不合适，因为最多可能有20张不同的卡

app.directive('myFitnessCard',[function(){
return {
    restrict : 'EA',
    replace : true,
    template : '<div>Calories : {{ entry.calories }}</div>',
    scope : {
        'entry' :'=?',
        'click' : '&',
        'togglePublish' : '&'
    },
    link : function(scope,elem,attrs){
        scope.$watch('entry.public', function(newVal,oldVal){
            scope.is_published = newVal;
        });

        scope.publish = function(e){
            scope.togglePublish({'entry' : scope.entry});
        };

        elem.bind('click', function(e){
            scope.click({ "entry" : scope.entry });
        });
    }
};
}]);




app.directive('myReportCard',[function(){
return{
    restrict : 'EA',
    replace : true,
    template : '<div>Completed : {{ entry.tasks_completed }}</div>',
    scope : {
        'entry' : '=?'
    },
    link : function(scope,elem,attrs){
        scope.$watch('entry.public', function(newVal,oldVal){
            scope.is_published = newVal;
        });

        scope.publish = function(e){
            scope.togglePublish({'entry' : scope.entry});
        };

        elem.bind('click', function(e){
            scope.click({ "entry" : scope.entry });
        });
    }

};
}]);



<ul>
    <li ng-repeat="e in entries">
        <div ng-if="e.type === 'report'" my-report-card entry="e"></div>
        <div ng-if="e.type === 'fitness'" my-fitness-card entry="e"></div>
    </li>
<ul>

这是我想要实现的非常简单的版本。 http://jsfiddle.net/pVgY2/

任何建议都将不胜感激

创建具有共同功能的指令

0 个答案: