Angularjs Directive scope

Question

I'm trying to create a directive and am running into some problems with the scope object. In creating a plunkr to display what is happening I noticed that I'm close, but not quite sure what I'm misunderstanding.

If i have a directive that looks like this:

angular.module('inputExample', [])
 .directive('test',
 function() { 
 return{
 restrict: 'E',
 link: function(scope){
 scope.testInput = 1;
 scope.$watch(
 'testInput',
 function(newTestInput){
 console.log(newTestInput);
 },
 false);
 }
 }
 });

And utilize the directive in the view like this:

 <test>
 <input data-ng-model="testInput" />
 <div>
 {{testInput}}
 </div>

the div seems to be updated correctly and there is a message logged to the console as I would expect.

If I create the directive like this though:

angular.module('inputExample', [])
 .directive('example',
 function() { 
 return{
 scope: {
 'settings': '@'
 },
 restrict: 'E',
 link: function(scope){
 scope.exampleInput = 1;
 scope.$watch(
 'exampleInput',
 function(newTestInput){
 console.log(newTestInput);
 },
 false);
 }
 }
 });
 </test>

and use it in a view like this:

 <example>
 <input data-ng-model="exampleInput" />
 <div>
 {{exampleInput}}
 </div>
 </example>

then the div seems to get updated, but there is no message logged to the console. It seems as though the $watch isn't working. Can someone please tell me what I'm doing wrong?

Here is the plunkr.

Thanks in advance for any help that can be offered.

• DevLounge: Why do you set 'settings' in the directive's scope? you don't seem to use it at all.
• peinearydevelopment: In this example I don't, but my actual scenario is using the settings. I can update the plunkr to reflect that, but that didn't seem to matter in causing this to happen.
• DevLounge: Ok, no issue, I was just wondering.

Answer 1

The problem with the example is that you're putting your HTML inside your directive tags. They should be in your template.

This code works

 angular.module('inputExample', [])
 .directive('example',
 function() { 
 return{
 scope: {
 'settings': '@'
 },
 restrict: 'E',
 template: '<input data-ng-model="exampleInput" /><div>{{exampleInput}}</div>',
 link: function(scope){
 scope.exampleInput = 1;
 scope.$watch(
 'exampleInput',
 function(newTestInput){
 console.log(newTestInput);
 },
 false);
 }
 }
 });

With the view as just

<example></example>

• peinearydevelopment: Excellent. This works in the plunkr. In my real example, I have the template in a separate html file and it still isn't working this way. I'll try to create a plunkr like that and see if I can get it to work. Any idea why having the template in a separate html file would be any different?
• Makaque: No, it should be the same. Sorry for not providint that in my answer, but am not very practised with plunkr.
• joy: Isn't issue is bcz of "scope" is defined in the directive which ovveride default scope therefore need to define "exampleInput" as well in "scope"?
• Makaque: @DilipKumar True, if the scope isn't overridden in the example directive, then it works. But @peinearydevelopment specified a need for the isolate scope in one of the comments.