javascript - 如何访问 `$scope.search.value`？

Question

我正在 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}} 中尝试过，但它什么也没显示。

有什么想法吗？

提前致谢。

Answer 1

您的指令具有隔离范围，即您无法从外部直接访问指令的范围变量。

幸运的是，search 变量已通过 search: '=?filter' 绑定(bind)到外部作用域。这意味着，如果您的指令具有过滤器属性，则该变量是双向绑定(bind)的。

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

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

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