JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<body ng-app="myApp">
<div ng-controller="NewEditCtrl">
<script type="text/ng-template" id="/tab-content.html">
<span mediasearch term="searchterm" enter="sendForm(e)" action="refreshAvailable()"></span>
</script>
<!-- Second position: Here the way back from the directive works perfectly -->
<!--<span mediasearch term="searchterm" enter="sendForm(e)" action="refreshAvailable()"></span> -->
<div id="tab-content" ng-include src="tabcontent"></div>
Search Term: {{bdfv}}
</div>
</body>
JavaScript
var myApp = angular.module("myApp", []);
myApp.controller('NewEditCtrl', function($scope, $http, $location) {
$scope.searchterm = {value:''};
$scope.tabcontent = "/tab-content.html";
$scope.$watch('searchterm', function() {
console.log('main'+$scope.searchterm.value);
})
});
myApp.directive('mediasearch', function($compile) {
return {
restrict: 'A',
scope: {
term: "=",
enter: "&",
action: "&"
},
link: function(scope, element, attrs) {
scope.$watch('term', function(newValue, oldValue, srcScope) {
console.log(scope.term.value);
})
},
template: '<div>' +
'<a href="#" ng-click="action()" id="submit" class="btn btn-kwst span1 pull-right">Filtern</a>' +
'<input ' +
'ng-model="term.value"' +
'type="text" ' +
'id="text-filter" ' +
'class="span6 pull-right" ' +
'autofocus ' +
'style="display: inline; margin-top: 1px"/>' +
'</div>',
replace: true
}
})