如何將屬性值傳遞給指令模板中使用的函數？

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