Как я могу связать модель углового директивы

Question

Я использую угловой тип вперед здесь

http://pineconellc.github.io/angular-foundation/#/typeahead

Я сделал директиву, где шаблон

<div> 
    <input type="text" 
      ng-model="user.selected" 
      placeholder="Type to select . . ." 
      typeahead="item as item.name for item in getData($viewValue)" 
      typeahead-loading="loadingData" 
      class="form-control"> 
    <i ng-show="loadingData" class="glyphicon glyphicon-refresh"></i> 
</div> 

и директива

return { 
    restrict: 'AE', 
    replace: true, 
    scope: true, 
    templateUrl: 'type.html', 
    link: function (scope, elem, attrs) { 
     var url = window.location.origin + attrs.url; 

     scope.getData = function (val) { 
      return $http.get(url, { 
       params: { 
        q: val 
       } 
      }).then(function (response) { 
       return response.data.map(function (item) { 
        return item; 
       }); 

      }); 
     }; 

    } 
}; 

я использую как это

<my-directivw url="api/user"> </my-directive>

Теперь вместо того, чтобы писать ng-model="user.selected" в шаблоне. я хочу что-то вроде этого

нг-модель = "somevar"

<my-directivw url="api/user" somevar="user.selected"> </my-directive>

Как я могу это сделать

Answer 1

Это может помочь вам.

Код HTML выглядит следующим образом.

<div ng-app="app" ng-controller="Ctrl as ctrl"> 
    <form name="theform"> 
     <range ng-model="ctrl.theRange" name="myRange" required="true"></range> 
    </form> 
    <button ng-click="ctrl.theRange = '10/100'">SET</button> 
</div> 

JavaScript код похож на этот

var app = angular.module("app",[]); 

app.controller("Ctrl", function($scope) { 
    this.theRange = "1/7"; 
}); 

app.directive("range", function() { 
    var ID=0; 

    function constructRangeString(from, to) { 
     var result; 
     if(!from && !to) { 
      result = null; 
     } 
     else if(from) { 
      result = from + "/" + (to || ""); 
     } 
     else if(to) { 
      result = "/" + to; 
     } 
     return result; 
    } 

    return { 
     require: "ngModel", 
     restrict: "E", 
     replace: true, 
     scope: { 
      name: "@" 
     }, 
     template: 
      '<div ng-form="{{ subFormName }}">' + 
       '<input type="text" ng-model="from" class="range-from" />' + 
       '<input type="text" ng-model="to" class="range-to" />' + 
      '</div>', 
     link: function(scope,elem,attrs,ngModel) { 
      var re = /([0-9]+)\/([0-9]+)/; 

      if(scope.name) { 
       scope.subFormName = scope.name; 
      } 
      else { 
       scope.subFormName = "_range" + ID; 
       ID++; 
      } 

      ngModel.$render = function() { 
       var result, from, to; 
       result = re.exec(ngModel.$viewValue); 
       if(result) { 
        from = parseInt(result[1]); 
        to = parseInt(result[2]); 
       } 
       scope.from = from; 
       scope.to = to; 
      }; 

      scope.$watch("from", function(newval) { 
       var result = constructRangeString(newval, scope.to); 
       ngModel.$setViewValue(result); 
      }); 
      scope.$watch("to", function(newval) { 
       var result = constructRangeString(scope.from, newval); 
       ngModel.$setViewValue(result); 
      }); 
     } 
    }; 
});