Angular ng-include创建了一个新的范围?

时间:2015-03-18 13:36:39

标签: html angularjs

我正在尝试创建一个角色项目,我在其中使用了包含。包含的页面需要相互通信。

问题似乎是包括创建自己的范围。但是我需要包含视图才能相互通信。

<!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>

第2页:

<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) {



}]);

我这里有一个插件(其中包含有关如何重现的说明)。 http://plnkr.co/edit/woyU4jfEvzMPDP1bv2Le?p=preview

我很感激任何帮助。

0 个答案:

没有答案