1

I am trying to create an angular project where I make use of includes. The pages in includes need to communicate with each other.

The issue seems to be that includes create their own scopes. However I need included views to be able to communicate with each other. 

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <h1>Hello Plunker!</h1>


  <div ng-controller="controller1">

    <p>
      test page 1:
      <input type="text" ng-model="test" />
    </p>

        <p>value: {{test}}</p> 




    <!-- include page 2 -->
    <ng-include src="'page2.html'"></ng-include>



<p>
  What's strange is that binding appears to work for page1 input.
  however when page 2 input is changed it almost creates it's own scope at that point!

</p>
<p>
 Steps to reproduce: </p>
  <ol>
    <li>Edit input for page1 you should see that page 1 and 2 are modified.</li>
    <li>Edit page 2 input, notice that page 1 isn't changed</li>
    <li>Edit page 1 input, again notice that page 2 isn't changed!</li>


  </ol>

  </div>


</body>

</html>

page2:

<div class="page2">

<h1> page2 </h1>
test page2: <input type="text" ng-model="test"/>
</div>

JavaScript:

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

angular.module('myApp').controller('controller1', ['$scope',function($scope) {

   $scope.test= "hello";

}]);


angular.module('myApp').controller('controller2', ['$scope',function($scope) {



}]);

I have a plunk here (which contains instructions on how to reproduce). http://plnkr.co/edit/woyU4jfEvzMPDP1bv2Le?p=preview

I'd appreciate any help.

K-Dawg
  • 3,013
  • 2
  • 34
  • 52
  • The link is incorrect - if you update it we might be able to help! – StudioTime Mar 18 '15 at 13:39
  • strange I just copied it again and then used it... it worked but then I copied it in here and it didn't again... thanks for letting me know I will get this sorted now – K-Dawg Mar 18 '15 at 13:41
  • 1
    put an dot (.) in your ng-model. The problem is that you are assigning a primitive, and its overriding the value on the child scope - thus breaking two way binding. – Michael Kang Mar 18 '15 at 13:42
  • I put a . in there as suggested and it worked! Thanks! – K-Dawg Mar 18 '15 at 13:47

0 Answers0