ng-focus doesn't work with ng-include

Question

I have a problem with ng-focus on ng-include elements. I use this part of code

<div ng-include="'template.tpl.html'" ng-controller="Ctrl" 
     ng-class="{'highlight':highlight==true,'nofocus':highlight==false}"></div>

and ng focus works fine when I have inside template.tpl.html regular DOM elements like:

<div class="form-group">
    <label class="control-label">My label</label>
    <div class="input-wrap">
        <input type="text" name="Name" class="form-control" 
               ng-model="client.firstName" ng-disabled="displayMode != 'edit'" 
               ng-focus="highlight=true" ng-blur="highlight=false">
    </div>
</div>

but, if I include another file in template.tpl.html it doesn't work anymore. For example if I apply in template.tpl.html the structure like below it won't work:

<div ng-include="'contacts/contacts-list.tpl.html'"></div>

Why ng-focus doesn't work on ng-include included in ng-include? Any tips on how to resolve this?

Works for me http://plnkr.co/edit/bWYANdm8Rf9ohaGnBatT?p=preview — PSL, Oct 03 '14 at 15:14
Works for me, too. Maybe your template is being loaded from cache and you get an obsolete template file. Try a hard refresh when in chrome developer mode to clear the template cache. — zszep, Oct 03 '14 at 15:29
I guess I didn't explain it well. Here is the plnkr to see what I was referring to: http://plnkr.co/edit/iIxgAPmK7GZgZqD0dRYA?p=preview — bigcat, Oct 03 '14 at 16:30
Ok Since you have clarified that you really have an issue, i have retracted my close vote. — PSL, Oct 04 '14 at 03:41

score 3 · Accepted Answer · edited May 23 '17 at 12:22

(Now that you have clarified your actual issue) As a continuation of the comment, ngInclude created a child scope of the provided scope, in your case child scope of child scope of Ctrl and well that does not matter since overall your wrapper is the Ctrl controller. But here you need to be careful while setting the scope property and expect the changes done from grandchild scope to be reflected in its grandparent scope. You have not even defined the properties in your controller, also even if you define them directly as scope.highlight = false the changes made to the property in the child or its child will not be reflected in the parent (though it will propagate down as a part of inheritance). You should remember scopes (except isolate scopes) are prototypically inherited, so in order to resolve this, you can use a property that holds the object reference which contains the property that needs to be modified, so that even if you change the value of property on that object from grandchild it will still reflect while accessing the same on the parent because they are all looking at the property on the same object reference

So in your controller initialize and object:-

.controller('MainCtrl', function($scope) {
  $scope.settings = {};
});

Set the bindings accordingly in the main html:-

<div ng-include="'tmpl.html'" ng-controller="MainCtrl" 
       ng-class="{'highlight':settings.highlight,'nofocus':settings.highlight}"></div>

And in its grand child as well:-

<input type="text" name="Name" class="form-control" 
    ng-model="client.firstName" 
    ng-focus="settings.highlight=true" ng-blur="settings.highlight=false">

Plnkr

You wouldn't get a better explanation on angular scopes than this answer.

ng-focus doesn't work with ng-include

1 Answers1