I'm not 100% sure what you want to do, but I'm guessing it's something like this:
module.directive('createControl', function($compile, $timeout){
return {
transclude: true,
restrict: 'A',
scope: {
name: '=name'
},
link: function(scope, element, attrs){
// simplified version
var tag = angular.element('<input type="text" ng-model="name" ng-change="changed(name)">');
element.append(tag);
$compile(tag)(scope);
},
controller: function($scope){
// In the controller I need to get value of created input on change event
$scope.changed=function(name){
console.log('changed to: '+name);
}
}
}
});
The link function creates a new input element, compiles it with the $compile
service and then links the new input element with scope
. This works with the following markup:
Hello {{myInput}}!
<div create-control name="myInput">
</div>
Check out this plunker: http://plnkr.co/edit/7XY90LXNn6gqpP47JaCH?p=preview