范围内更改包括html

问题描述:

所以我包括blog.html这是一个帖子列表,但当我尝试更改blog.html中的活动变量似乎范围已更改?范围内更改包括html

当我点击其中一个帖子时,测试点A将保持不变,但测试点B会改变。

发生了什么事?我怎样才能使它工作?

的index.html

<body ng-app="myApp" ng-controller="myController"> 
    <nav id="mainNav"> 
     <ul> 
      <li><a ng-click="active = 'views/blog.html'">Blog</a></li> 
      <li><a ng-click="active = 'views/about.html'">About</a></li> 
      <li><a ng-click="active = 'views/controlPanel.html'">Control Panel</a></li> 
     </ul> 
    </nav> 
    <div> 
     <div ng-include="active"></div> 
    </div> 
    {{active}} //Testing point A 
</body> 

blog.html

<ul id="posts"> 
    <li class="post" ng-repeat="post in posts"> 
     {{active}} //Testing point A 
     <a ng-click="active = 'views/about.html'"> 
      <img src="{{post.image}}" /> 
      <div class="text"> 
       <h2>{{post.title}}</h2> 
       <p class="date">{{post.date}}</p> 
      </div> 
     </a> 
    </li> 
</ul> 

的script.js

angular.module('myApp', []).controller('myController', function ($scope, $http) { 
    $scope.active = 'views/blog.html'; 
    $http.get("data.json").then(function (response) { 
     $scope.posts = response.data.posts; 
    }); 
}); 
+0

'ng-include'是一个有自己范围的指令。您需要创建一个组件或指令 – Hoyen

+0

@Hoyen,如果您使用angularjs nevradub

回答你的问题是以及解决方案在这里详细阐述:Angular passing scope to ng-include

虽然,我不明白的一个想法是,你为什么要点击某些职位后将用户带到“about.html”页面。您应该为单个帖子分开发布博文页面。像“post.html”。这个模板应该包含在“blog.html”中。