ディレクティブテンプレートで使用される関数に属性値を渡す方法は？

Question

再利用可能なオートコンプリートのテキストフィールドコンポーネントを作成したいと思います。私はそれを再利用可能にすることができない瞬間に、ただ1つのインスタンスしか存在しない可能性があります。

これはテンプレートです：

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