CODEWITHSUNDEEP
javascriptangularjs
Bill
Bill

Reputation: 19268

Ng-repeat within directive lost scope

I am running into a problem with scope within directive

Try the following link (try the second and third input box they should share the same ng-model)

https://output.jsbin.com/rudimihuha

Basically i have a directive and a ng-rpeat within, somehow the scope got lost within the ng-repeat, any reason why it's doing this way?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2015 by anonymous (http://jsbin.com/rudimihuha/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
  <title>JS Bin</title>
</head>
<body ng-app="MyApp">
<test></test>
<script>
var myApp = angular.module('MyApp', []);
console.log('hit');

myApp.directive('test', function () {
    return {
        restrict: 'E',
        template: "<div>inertanl - {{formResult}} <input type=\"text\" ng-model=\"formResult\"> <div> <div ng-repeat=\"(key, value) in ['test', 'test2']\"> <input type=\"text\" ng-model=\"formResult\"> </div></div>",
        replace: true,
        scope: {
            ngModel : '='
        }
    };
});
</script>
<script src="https://static.jsbin.com/js/render/edit.js?3.30.3"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https://static.jsbin.com","root":"https://jsbin.com"});</script>
<script src="https://static.jsbin.com/js/vendor/eventsource.js?3.30.3"></script>
<script src="https://static.jsbin.com/js/spike.js?3.30.3"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'jsbin.com');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
</html>

Upvotes: 1

Views: 271

Answers (2)

noveyak
noveyak

Reputation: 3300

As Johnny said the scope is not the same. If you want to access a parent scope from children you can do $parent (code below will keep all your inputs in sync)

var myApp = angular.module('MyApp', []);
console.log('hit');

myApp.directive('test', function () {
    return {
        restrict: 'E',
        template: "<div>inertanl - {{formResult}} <input type=\"text\" ng-model=\"formResult\"> <div> <div ng-repeat=\"(key, value) in ['test', 'test2']\"> <input type=\"text\" ng-model=\"$parent.formResult\"> </div></div>",
        replace: true,
        scope: {
            ngModel : '='
        }
    };
});

Upvotes: 1

Johnny Ha
Johnny Ha

Reputation: 633

According to Angular documentation ng-repeat create a new scope.

You can read more about it here: https://docs.angularjs.org/api/ng/directive/ngRepeat

Upvotes: 1

Related Questions