CODEWITHSUNDEEP
angularjs
Marco
Marco

Reputation: 2463

Why is this code broken in AngularJS 1.2?

Goodevening,

The following code seems to work in older versions of Angular, but not in the 1.2 version. I am not sure why that is. What happens in Angular 1.2, is that the $watch directive does not get hit. It does not execute. It does execute in Angular 1.0.1.

Any idea why?

HTML

<fieldset validatedmarker>
    <legend>User</legend>
    <input type="text" name="name" class="form-control" ng-model="name" required>
</fieldset>

And the JS.

var APP = angular.module('myApp', []);

APP.directive('validatedmarker', function() {
    return {
        restrict: 'AE',
        scope: { },
        link: function(scope,e,a) {
            scope.$watch(function() {
                return scope.name;
            }, function(newValue, oldValue) {
                console.log("change detected: " + newValue)
            });
        }
    };
});

Working example (Angular 1.0.1)

http://jsfiddle.net/2w8xW/

Non working example (Angular 1.2.0)

http://jsfiddle.net/24P86/

Thanks!

Upvotes: 0

Views: 89

Answers (3)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

the main reason why this is hapening is probably due to the fact that you are creating an isolated scope over an already liked html since you are not providing a template but rather using the existing html wich is most likely to be linked to the parent scope so you should take your directives innerhtml and use it as a template for your directive like 

APP.directive('validatedmarker', [function() {
    return {
        restrict: 'AE',
        scope: { },
        template:'<fieldset><legend>User</legend><input type="text" name="name" class="form-control" ng-model="name" required="true"/>',
        replace:true,
        link: function(scope,e,a) {
            scope.$watch(function() {
                return scope.name;
            }, function(newValue, oldValue) {
                console.log("change detected: " + newValue)
            });
        }
    };
}]);

<div validatedmarker></div>

you can see it here

http://jsfiddle.net/24P86/1/

Upvotes: 2

sma
sma

Reputation: 9597

You are specifying an isolated scope, but with no attributes inside. You can either add attributes inside the scope property of your directive, or remove it altogether if you don't need to isolate your directive's scope.

More info on the attributes can be found here (search on 'isolate' scope):

https://docs.angularjs.org/api/ng/service/$compile

Upvotes: 1

Chandermani
Chandermani

Reputation: 42669

The most probable reason for this is the treatment of isolated scopes, that has changed in AngularJS 1.2.0

In earlier version everything inside the directive element got the isolated scope, but now the elements inside the directive get the original parent scope. So when you are setting the value of scope.name you are setting on parent scope. The watch is on child scope.

See this SO answer AngularJS Scope differences between 1.0.x and 1.2.x and the changelog.

To make your example work you would have to create a template for your directive and set transclude: true in directive definition.

Upvotes: 2

Related Questions