Question

我想构建一个可重用的自动填充文本字段组件。目前我无法重复使用，只能有一个实例。

这是模板：

<md-content class="md-padding">
<form ng-submit="$event.preventDefault()">
    <md-autocomplete
            ng-disabled="isDisabled"
            md-selected-item="selectedItem"
            md-search-text-change="searchTextChange(searchText)"
            md-search-text="searchText"
            md-selected-item-change="selectedItemChange(item)"
            md-items="item in querySearch(searchText, dataArray)"
            md-item-text="item.display"
            md-min-length="0"
            placeholder="{{placeholderText}}">
        <md-item-template>
            <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
    </md-autocomplete>
</form>

这是我的HTML：

<div ng-controller="myController" layout="column" ng-cloak>
    <auto-complete a = "{{data1}}"></auto-complete>
    <auto-complete a = "{{data2}}"></auto-complete>
</div>

可自定义的唯一部分是数据，它是一个字符串数组。

这是控制器和指令：

angular
.module('myApp', ['ngMaterial'])
.controller('myController',['$scope', '$timeout','$q', '$log', function($scope, $timeout, $q, $log) {
    $scope.simulateQuery = false;
    $scope.isDisabled    = false;
    // assign the data
    $scope.data1        = loadDataArray();
    $scope.querySearch   = querySearch;
    $scope.selectedItemChange = selectedItemChange;
    $scope.searchTextChange   = searchTextChange;
    $scope.placeholderText = "Choose a state";
    $scope.data2 = ['a', 'b', 'c'];
    $scope.dataArray = [];

    function querySearch (query, data) {
        var results = query ? data.filter( createFilterFor(query) ) : data, deferred;
        if ($scope.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () {
                    deferred.resolve( results );
                },
                Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }

    //filter function for search query
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(record) {
            return (record.value.indexOf(lowercaseQuery) === 0);
        };
    }

    // Run this function each time search text is changed
    function searchTextChange(text) {
        $log.info('Text changed to ' + text);
    }
    // Run this function each time a new item is selected
    function selectedItemChange(item) {
        $log.info('Item changed to ' + JSON.stringify(item));
    }
    //build list of states as map of key-value pairs
    function loadDataArray() {
        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
             Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
             Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
             Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
             North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
             South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
             Wisconsin, Wyoming';
        return allStates.split(/, +/g).map( function (state) {
            return {
                value: state.toLowerCase(),
                display: state
            };
        });
    }
}]).directive('autoComplete', function(){
    return {
        restrict: "E",
        link: function(scope, element, attr) {
             scope.dataArray = attr.a;
        },
        templateUrl: "temp.html",
        replace: true
    }
});

Answer 1

在我按照这样的指令进行修改后，它起作用了：

return {
    scope: true,
    restrict: "E",
    link: function(scope, element, attr) {
         scope.dataArray = attr.a;
    },
    templateUrl: "temp.html",
    replace: true
}

Answer 2

尝试改变这样的指令。

.directive('autoComplete', function(){
    return {
        restrict: "E",
        scope: {
            'data' : '=a'
        },
        link: function(scope, element, attr) {
             scope.dataArray = scope.data;
        },
        templateUrl: "temp.html",
        replace: true
    }
});

如何将属性值传递给指令模板中使用的函数？

2 个答案: