Question

在此指令中：

(function(){
    var app = angular.module('hrefDirective',['productosService']);

    app.directive('customHref', ['productosService', function(productosService) {
        return {
            restrict: 'EA',
            template: '<li ng-repeat="familia in getfamilias"><p><a ng-bind="familia.name" ng-href="{{familia.href}}"></a></p></li>',           
            link : function(scope, element, attrs){
                productosService.getFamilias().then(function(data){
                    scope.getfamilias = data.data;
                    for(var t in scope.getfamilias){
                        productosService.getFinalFamilias(scope.getfamilias[t].id).then(function(result){
                            scope.getfamilias[t].href = result.data.rows == 0 ? '#/producto' : '#/productos/{{familia.name}}';
                        });
                    }                               
                });
            }
        };
    }]);    
})();

我无法在模板中渲染ng-bind。链接中的scope.getfamilias具有以下结构：

{id: "x", name: "xxxx", id_categoria: "x"}

在链接中，我通过服务获取原始的getfamilias对象，并在新服务中使用id属性获取新的属性并将其推送到原始的getfamilias对象，以将其用作模板内的href，但它是不工作。

有关如何获取模板值的任何线索？

Answer 1

您的代码中存在一些错误，因此我建议您使用以下内容：

 app.directive('customHref', ['productosService', function(productosService) {
        return {
            restrict: 'EA',
            template: '<li ng-repeat="familia in getfamilias"><p><a ng-bind="familia.name" ng-href="{{familia.href}}"></a></p></li>',           
            link : function(scope, element, attrs){
                productosService.getFamilias().then(function(data){
                    // you have to make sure your data.data has a collection, I don't know your complete code, 
                    // so I'm just leaving this part as it is. 
                    scope.getfamilias = data.data;

                    //Use angular.forEach instead of for(x in y)
                    angular.forEach(scope.getfamilias, function(familia){
                        productosService.getFinalFamilias(familia.id).then(function(result){

                            // render the name here instead of using '#/productos/{{familia.name}}'
                            familia.href = result.data.rows === 0 ? '#/producto' : '#/productos/' + familia.name ;
                        });
                    });                              
                });

            }
        };
    }]);

我为你做了一个傻瓜，请看看：

http://plnkr.co/edit/FBS257ddJKTdYGVP4d7Y?p=catalogue

AngularJS指令在模板上的ng-repeat中链接范围

1 个答案: