javascript - AngularJS 指令未正确绑定(bind)属性

Question

我对 Angular 比较陌生，这是我第一个涉及的指令，我有点迷失。我正在尝试在我的应用程序中的单独选项卡上创建可重复使用的项目列表。除了项目的显示方式(由单独的部分处理)之外，列表的行为相同。我将许多不同类型的属性传递到作用域中，并且根据我所阅读的内容尝试几种不同的操作。无论到目前为止我已经尝试过什么，我仍然遇到属性正确绑定(bind)的问题。

下面是我的代码，我会尽力解释它，希望有人能告诉我哪里出错了。唯一看起来绑定(bind)正确的是字符串、对象和函数丢失。

更新:原来我需要将 $scope.currentPage 绑定(bind)到指令范围。现在 ng-repeat 正在运行，但需要访问 Controller 范围的页面其他部分无法正常工作。我更新了下面的代码并继续研究如何授予对模板的访问权限。

指令

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>

列表选项卡.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>

汽车模板.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>

Answer 1

尝试使用括号传递函数

<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>

另外仅供引用，如果您的变量在 HTML 中的名称与您在指令范围内的名称相同，则可以使用 pass 方法。例如

scope: {
    filterFunction: "&",
    searchPlaceholder: "@",
    pagedItems: "@",
    clickFunction: "&",
    classString: "@",
    infoTemplate: "@template"
}