Question

我正试图以下列方式使用Angular的搜索过滤器，但无法弄清楚我做错了什么。

此应用程序应该能够使用搜索输入来搜索控制器中的所有制造商名称和项目。

我知道它工作得有点正确，因为我的浏览器显示了两个对象的图像和manufacturer.name：manufacturer1和manufacturer2，但它没有显示项目，搜索功能也不起作用。

非常感谢帮助！我对Angular很新。

<div ng-controller="SearchCtrl">        

    <input type="search" ng-model="search" class="form-control" placeholder="Search Manufacturers, Solutions, Equipment, Etc.">    

    <manufacturer info="manufacturer1"></manufacturer>
    <manufacturer info="manufacturer2"></manufacturer>

</div>

控制器：

app.controller('SearchCtrl', ['$scope', function ($scope) {
$scope.manufacturer1 = {
    name: 'Business Name',
    items: [
        'service1',
        'service2',
        'service3'
    ],
    image: 'assets/images/image.png'
};
$scope.manufacturer2 = {
    name: 'Other Business',
    items: [
        'product1',
        'product2',
        'product3'
    ],
    image: 'assets/images/image.png'
};
}]);

指令JS

app.directive('manufacturer', function() {
return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'assets/js/directives/manufacturer.html'
};
});

指令模板：

<div class="col-md-4">
    <h2 class="business-title">{{ info.name }}</h2>
    <img ng-src="{{ info.image }}" class="feature-img" alt="image"/>
    <ul>
        <li ng-repeat="item in items | filter:search">
            {{ info.items }}
        </li>
    </ul>
</div>

Answer 1

由于manufacturer指令具有隔离范围，因此您无法访问指令内的search变量，因此需要将search变量传递给指令{{}中的指令。 1}}＆amp;在指令隔离范围内包含该属性，就像您对attribute变量所做的那样。

基本上，您需要在指令隔离范围内添加info，这将通过使用属性serach: '='将search输入框值传递给指令。 search="search"用于双向绑定以更新搜索结果，因为用户将更改输入信息将自动过滤。

<强>标记

<强>指令

<input type="search" ng-model="search" class="form-control" placeholder="Search Manufacturers, Solutions, Equipment, Etc.">    
<manufacturer info="manufacturer1" search="search"></manufacturer>
<manufacturer info="manufacturer2" search="search"></manufacturer>

<强>更新

您app.directive('manufacturer', function() { return { restrict: 'E', scope: { info: '=', search: '=' }, templateUrl: 'assets/js/directives/manufacturer.html' }; });中的html错误，特别是使用manufacturer.html显示项目的内容

ng-repeat

Demo Plunkr

无法在Angular指令中创建搜索

1 个答案: