AngularJS 指令未正确绑定属性

AngularJS directive not binding attributes correctly

本文关键字：绑定 属性 指令 AngularJS      更新时间：2023-09-26

我对角度比较陌生，这是我第一次参与指令，我有点迷茫。我正在尝试在我的应用程序的单独选项卡上创建一个可重用的项目列表。列表的作用相同，但项目的显示方式除外（由单独的部件处理）。我正在将许多不同类型的属性传递到范围中，并且我正在根据我所阅读的内容尝试几种不同的东西。到目前为止，无论我尝试了什么，我仍然遇到正确绑定属性的问题。

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

更新：事实证明我需要将$scope.currentPage绑定到指令范围。现在 ng-repeat 正在运行，但需要访问控制器范围的页面的其他部分不起作用。我已经更新了下面的代码，并继续研究如何授予对模板的访问权限。

命令

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"
     }
  }
});

索引.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>

尝试使用括号传递函数

<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"
}
相关文章：