Как использовать динамическое имя области в Угловой директиве?

Question

Я пытаюсь создать директиву, которая позволяет мне установить переменную области видимости как имя переменной, которая передается как атрибут данных.

я в настоящее время следующие:

<input create-user-dropdown ng-model="userValue" data-my-var="myVar" /> 

app.directive('createUserDropdown', function(){ 
    return { 
     restrict: 'A', 
     scope: { 
      myVarNameHere: "=" 
     } 
     link: function(scope, elem, attr){ 
      scope.$watch(attrs.ngModel, function (value) { 
       $scope.myVarNameHere = value; 
      }); 
     } 
    }; 
}); 

Как я могу использовать имя переменной, которая передается через data-my-var в качестве переменной области действия вместо текущей в моей директиве, которая в настоящее время под названием myVarNameHere?

Answer 1

как мы выяснили в комментариях вы можете создать директиву с шаблоном, как

.directive('myDir', function($http) { 
    return { 
    scope:{ 
     val: '=',//variable from parent scope for handling input value, if result of input not used outside directive can be removed 
     template: '=' // template url for repeated div 
    }, 
    template: '<input ng-model="val" ng-change="search()" />'+ 
       '<div ng-repeat="item in founded" ng-include="template"></div>', 
    link: function link(scope, iElement, iAttrs, controller, transcludeFn) { 
     scope.search = function(){// create change handler 
     //use value `data-service` attribute as service name 
     $http.get(iAttrs.service).success(function(data){ 
      scope.founded = data; 
     }); 
     }  
    } 

    } 
} 

рабочего plunkr

Answer 2

Попробуйте так:

<input create-user-dropdown ng-model="userValue" data-my-var="myVar" /> 

app.directive('createUserDropdown', function(){ 
    return { 
     restrict: 'A', 
     scope: { 
      myVarNameHere: "=myVar" 
     }, 
     link: function(scope, elem, attr){ 
      scope.$watch(attrs.ngModel, function (value) { 
       scope.myVarNameHere = value; 
      }); 
     } 
    }; 
});