지시어 템플릿에 사용되는 함수에 속성 ​​값을 전달하는 방법은 무엇입니까?

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