Javascript AngularJS指令未正确绑定属性
我对angular比较陌生,这是我第一个涉及到的指令,我有点迷路了。我正在尝试在我的应用程序的各个选项卡上创建一个可重复使用的项目列表。除了项目的显示方式(由单独的部分处理)外,列表的作用相同。我正在将许多不同类型的属性传递到范围中,并根据我所阅读的内容尝试了几种不同的方法。无论到目前为止我尝试了什么,我仍然在正确绑定属性方面存在问题 下面是我的代码,我会尽可能地解释它,希望有人能告诉我哪里出错了。唯一似乎绑定正确的是字符串,缺少对象和函数 更新:原来我需要将$scope.currentPage绑定到指令范围。现在ng repeat正在运行,但页面中需要访问控制器作用域的其他部分不起作用。我已经更新了下面的代码,并继续研究如何访问模板 指示Javascript AngularJS指令未正确绑定属性,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我对angular比较陌生,这是我第一个涉及到的指令,我有点迷路了。我正在尝试在我的应用程序的各个选项卡上创建一个可重复使用的项目列表。除了项目的显示方式(由单独的部分处理)外,列表的作用相同。我正在将许多不同类型的属性传递到范围中,并根据我所阅读的内容尝试了几种不同的方法。无论到目前为止我尝试了什么,我仍然在正确绑定属性方面存在问题 下面是我的代码,我会尽可能地解释它,希望有人能告诉我哪里出错了。唯一似乎绑定正确的是字符串,缺少对象和函数 更新:原来我需要将$scope.currentPage
var app = angular.module('main');
app.directive('itemList', function(){
var linkFunction = function(scope, element, attributes){
scope.$watch("query.value", function(){
scope.filterFunction(); //pretty sure this never gets called on search
});
}
return {
restrict: 'E',
replace: 'true',
templateUrl: 'partials/directives/list-tab.html',
link: linkFunction,
scope: {
filterFunction: "&filterFunction",
searchPlaceholder: "@searchPlaceholder",
pagedItems: "=pagedItems",
clickFunction: "&clickFunction",
classString: "@classString",
infoTemplate: "@template",
currentPage: "=currentPage"
}
}
});
index.html
//pagedCars is an array of nested objects that gets used by the template to display the information
//filterCars is a function
//carSelected is a function
<div class="available-items">
<item-list filter-function="filterCars" search-placeholder="Search Cars" paged-items="pagedCars" current-page="currentPage" click-function="carSelected" class-string="car.carId==selectedCar.carId?'selected':''" template="'partials/cars/cars-template.html'"></item-list>
</div>
//pagedCars是一个嵌套对象数组,模板使用它来显示信息
//filterCars是一个函数
//carSelected是一个函数
list-tab.html
<div class="form-group">
<div class="search-field">
<label for="searchField" id="searchLabel">Search</label><br/>
<input type="text" ng-model="query.value" placeholder="{{searchPlaceholder}}"/>
</div>
<table class="table table-hover>
<tbody>
//currentPage is on the controller scope there's a separate control that allows the user to page through the pagedItems by updating the currentPage which would be reflected here
<tr ng-repeat="item in pagedItems[currentPage]" ng-click="clickFunction($index) ng-class="classString">
<td ng-include="infoTemplate"></td>
</tr>
</tbody>
</table>
</div>
搜索
cars-template.html
<div class="row form-inline" id="{{item.carId}}">
<div class="col-md-2">
//this uses a method on the controller scope to format the url
<img ng-src="{{retrieveIcon(item.iconUrl)}}" height="75px" width="75px"/>
<div class="col-md-10">
<div details-pane" id="carDetails" ng-include="'partials/cars/car-full-details.html'"></div>
<div class="item-title">{{item.name}}</div>
//the rest is just a table with more information about the item. item.description, item.mileage, etc...
</div>
</div>
//这将使用控制器作用域上的方法格式化url
尝试用括号传递函数
<div class="available-items">
<item-list filter-function="filterCars()" search-placeholder="Search Cars" paged-items="pagedCars" click-function="carSelected()" class-string="car.carId==selectedCar.carId?'selected':''" template="'partials/cars/cars-template.html'"></item-list>
</div>
谢谢你的回答,我刚刚发布了关于其他问题的更新。我本来是想添加括号的,但是遇到了一些问题。我想我可能需要从控制器中提取几个方法,并将它们放在指令中。一旦我解决了范围问题,我可能会返回并尝试这样做
scope: {
filterFunction: "&",
searchPlaceholder: "@",
pagedItems: "@",
clickFunction: "&",
classString: "@",
infoTemplate: "@template"
}