CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Maryam Dairkee
Maryam Dairkee

Reputation: 147

In Angular JS change in Model value is not reflected in directive's template

I'm new to AngularJS. I'm creating a directive with a template search-result. and using the directive inside main.html. which corresponds to mainController. Index.html binds model value handle with the textbox. Changing the text in textbox changes $scope.handle value but why the change is not reflected in main.html using the directive's template

In index.html in 

<div ng-controller="mainController">
    <h1>Its the second Controller</h1>
    <input type="text" ng-model ="handle" name= "myField"/>
</div>

In app.js

myApp.directive("searchResult", function(){
    return {
        restrict:"AECM",
        templateUrl:'Directives/search-result.html',
        replace:true
    }
})

In main.html

<div class="container">
      <search-result></search-result>
</div>

In search-result.html

<a href="#" class="list-group-item">
    <p class="list-group-item-text">{‌{handle}}</p>
</a>

Upvotes: 2

Views: 136

Answers (1)

Rafael Ribeiro
Rafael Ribeiro

Reputation: 36

Directives inherit their parent's controller scope by default. But it seems you are placing the searchResult directive outside the mainController, so the directive will not have access to the $scope.handle value.

Place the search result inside the main controller to be able to access it's scope from the directive.

Upvotes: 1

Related Questions