Question

我是AngularJS的新手，试图使用嵌套指令。我有一个家庭布局，有以下

<product-list></product-list>

该指令有一个模板，该模板存在于另一个文件中。它有这样的内容

<div class="products"> <product prod-id="{{product.id}}" ng-repeat="product in products"></product> </div>

我面临的问题是编译product-list指令时，它无法理解表达式中的product.id。它给了我一些错误

Error: Syntax Error: Token 'product.id' is unexpected, expecting [:] at column 3 of the expression [{{product.id}}] starting at [product.id}}].

指令定义为

app.directive('productList', function($compile) {
return {
    restrict: 'AE',
    replace: true,
    controller: 'ProductListCtrl',
    templateUrl: base_url + 'partials/directives/product-list.html'
};
});

app.directive('product', function() {
return {
    restrict: 'AE',
    controller: 'ProductCtrl',
    templateUrl: base_url + 'partials/directives/product.html',
    scope: {
        prodId: '=prodId'
    },
    link: function ($scope, element, attrs) {
        var num = $scope.$eval(attrs.prodId);
        if(!isNaN(parseInt(num))){
            $scope.prodId = num;
        }
    }
};
});

更新：添加指令控制器

myApp.controller("ProductListCtrl", ['$scope', 'ProductModel', '$stateParams', '$location', function($scope, ProductModel, $stateParams, $location) {
$scope.products = {};

//Fetch the products if we have some category for a given state
if(typeof $stateParams.categoryId != 'undefined' && typeof $stateParams.prodId == 'undefined'){        
    //Fetch products for selected category and page
    ProductModel.getProductsByCategory($stateParams.categoryId, function(products){
        $scope.products = products;
    });
} 

}]);

请指导我做错了什么或遗失任何东西。

Answer 1

发生了奇怪的事情，不确定它是否正确，但它对我有用：）

我用过

<product prod-id="product.id" ng-repeat="product in products"></product>

而不是

<product prod-id="{{product.id}}" ng-repeat="product in products"></product>

并且有效

嵌套指令将无法按预期工作

1 个答案: