CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
dryhead
dryhead

Reputation: 11

Two-way-binding in directive that is inside a template not working

I've been trying all afternoon to solve the following problem: I made up a directive that shows a search form. The model for the searchterm is defined in the controller and communicates with the directive perfectly. But: When I put the directive inside an Angular template, that is loaded after the DOM is ready, it's just one way into the directive and not back.

<body ng-app="myApp">
<div ng-controller="NewEditCtrl">

    <script type="text/ng-template" id="/tab-content.html">
    <!-- First position for the directive: The way back from the directive to here does not work -->
    <!-- Uncomment to test and show the console output ! -->

    <!-- <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>

</div>

I put the example in a working fiddle: http://jsfiddle.net/RCaCM/2/ Please see the comments.

I guess it is a scope problem, but I don't get to the point with $apply or $compile.

Thanks in advance for you help. XL

Upvotes: 0

Views: 642

Answers (2)

Chandermani
Chandermani

Reputation: 42669

As @Sebastien pointed, ng-include creates a child scope. You have to bind any object and it would work, see my updated fiddle.

http://jsfiddle.net/cmyworld/JC28H/

Instead of using searchterm, use something like

$scope.searchterm={value:''}

Upvotes: 1

Sebastien C.
Sebastien C.

Reputation: 2109

You're right, it's a scope issue : with ng-include angular creates a child scope. So when you change the property in the parent scope, it changes the value in the child too, but not in the other side. If you want both to be linked you should you a intermediate service

Another way could be to emit the change from your directive to the parent scopes, and to listen to it in the main scope (or in rootscope) :

http://jsfiddle.net/RCaCM/3/

Upvotes: 0

Related Questions