私は 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;
});
}
}]);
私が間違っていることや不足していることを教えてください。