如何访问“$scope.search.value”

How to access `$scope.search.value`?

本文关键字：scope search value 何访问 访问      更新时间：2023-09-26

我正在ionic框架下开发一个应用程序。

我在Google上找到了ionic的搜索栏指令，它工作了。

    .directive('ionSearch', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                getData: '&source',
                model: '=?',
                search: '=?filter'
            },
            link: function(scope, element, attrs) {
                attrs.minLength = attrs.minLength || 0;
                scope.placeholder = attrs.placeholder || '';
                scope.search = {value: ''};
                if (attrs.class)
                    element.addClass(attrs.class);
                if (attrs.source) {
                    scope.$watch('search.value', function (newValue, oldValue) {
                        if (newValue.length > attrs.minLength) {
                            scope.getData({str: newValue}).then(function (results) {
                                scope.model = results;
                            });
                        } else {
                            scope.model = [];
                        }
                    });
                }
                scope.clearSearch = function() {
                    scope.search.value = '';
                };
            },
            template: '<div class="item-input-wrapper">' +
            '<i class="icon ion-android-search"></i>' +
            '<input type="search" placeholder="{{placeholder}}"  ng-model="search.value">' +
            '<i ng-if="search.value.length > 0" ng-click="clearSearch()" class="icon ion-close"></i>' +
            '</div>'
        };
    })
<ion-content overflow-scroll='true'>
      <div class="bar bar-header  item-input-inset">
        <ion-search class="search-wrapper-light" placeholder="Search..." min-length="1" model="results" source="getExamsByName(str)"></ion-search>
      </div>
    <div ng-if="exams">
      <p>Found {{exams.length}} results </p>
      <p>{{search.value|json}}</p>
    </div>
    <ion-list>
      .....
      ...
    </ion-list>

但是我不知道如何访问$scope.search.value(即输入文本)。

我已经尝试在我的html文件{{search.value}}，但它显示什么。

任何想法?

你的指令有一个隔离的作用域，也就是说你不能从外部直接访问指令的作用域变量。

幸运的是，search变量已经被search: '=?filter'绑定到外部作用域。这意味着，如果你的指令有filter属性，这个变量是双向绑定的。

因此，如果像下面这样增强HTML 

 <ion-search class="search-wrapper-light" placeholder="Search..." min-length="1" model="results" source="getExamsByName(str)" filter="search"></ion-search>

则外部作用域变量search将保存指令内部的搜索作用域变量

当您在指令中使用=?filter时，=确实意味着您在指令中使用双向数据绑定，但?可以是可选变量&第三部分是filter，表示属性名。你应该在你的指令元素中包含filter属性和一些值，你的控制器也应该有像$scope.search = {}这样的值定义，所以最初它将是一个对象。

标记 

<ion-search class="search-wrapper-light" placeholder="Search..." min-length="1" 
  model="results" source="getExamsByName(str)" filter="search">
</ion-search>

您已经在隔离作用域中定义了search属性。不应该是source吗

相关文章：